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は じ め に 


CSS (Cascading Style Sheets) は 、 HTML / XHTML で 構 
造 化 さ れ た 文書 情報 に 対し て 、 ページ 全体 の レイ アウ ト 、 文 
字 (フォ ント ) の サイ ズ ・ 色 、 個々 の 要素 の 配置 や 装飾 と い 
っ た “見 た 目 " を 指定 する 技術 で す 。 そ の 最新 バー ジョ ン で 
あり 、 現 在 策定 中 の CS53 で は 新しく プロ パテ ィ や セレ クタ 
が 追加 され 、 例 えば 属性 セレ クタ を 利用 し て リン ク フ ァ イ 
ル の 拡張 子 別 に アイ コン 画像 を 表示 する 指定 が 可能 に な っ 
た り 、 文字 に 影 を つけ る 、 ボタ ン の 角 を 丸く する な どの 装飾 
が 画像 を 用 い ず に 表現 で きる よう に な っ た り と 、CSS3 に よ 
っ て Web サ イト の 表現 の 幅 は 格段 に 広がり ます 。 そ の 一 方 
で 、Internet Explorer 8 以下 の バー ジョ ン の ブラ ウザ は CSS3 
に 対応 し て いな いこ と か ら 、 Web 制 作 の 実務 案件 で CS53 を 
使う こと を た め ら う 方 も 多い の で は な いで し ょ うか 。 


本 書 は 、 Web 制 作 の 現場 で 「CSS53 を どの よう に 使う か 」 を 、 
サン プル を 例 に ソー スコ ー ド と と も に 解説 し た テク ニッ ク 
集 で す 。 各 記事 で 扱っ て いる テク ニッ ク や サン プル に は 、 

実際 に Web サ イト で よく 使用 され て いる 実用 的 な も の を 選 
び 、Web 制 作 の 第 一 線 で 活躍 し て いる プロ が 制作 手法 を 丁 
寧 に 解説 し て いま す 。CSS3 を 実務 案件 で 使う こと を 前 提 に 、 
対応 し て いな い プ ラウ ザ へ の 対策 や アク セ シ ビ リティ を 確 
保 す る 手法 な ども 、 で きる 限り 盛り 込ん だ 実践 的 な 内 容 に 
な っ て いま す 。 ま た 、 コ ピー& ペ ー ス ト に と ど ま ら な い コ ー 
ディ ング の 応用 力も 身 に 付け られ る よう に 、 単 純 な ソー ス 
コー ド の 説明 だ け に 終始 せ ず 「 な ぜ こ う 書 く の か 」 と いう 理 
論 的 な 背景 も フォ ロー し まし た 。 


CSS3 は まだ 策定 中 の 技術 で は ある も の の 、 段 階 的 に プラ ウ 
ザ へ の 実装 が 進め られ て お り 、 ス マー ト フ ォ ン サイ ト で は 
実質 的 な スタ ンダ ー ド と な っ て いま す 。 仕様 の 確定 に は ま 
だ 時 間 が 掛か る で し ょ う が 、 使 える 技術 を 部 分 的 に で も 取 
り 入 れ て いく こと で コー ディ ング が シン プル に な り ま すし 、 
将来 の 移行 も より スム ー ズ に 行え る は ず で す 。 本 書 が 一 人 
で も 多く の 方 の お 役に立ち 、CSS3 を 活用 する こと で 、 よ り 
使い や すく 華やか な Web サ イト や コン テン ツ が 生み 出さ れ 
る 手助け に な れ ば 幸い で す 。 
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本 書 の 使い 方 


本 書 は CSS3 を 利用 し た Web ペー ジ の 制作 手法 を ステ ッ プ ・ バ イ ・ ス テッ プ 形 式 で 解説 し た テク ニッ ク 集 で す 。 
本 書 は 次 の よう な 構成 に な っ て いま す 。 


CHAPTER 01 レイ アウ ト リバ コ 1 コレ 全 に レン スム ョ アユ と く 









































Web ペー ジ 全 体 の レイ アウ ト に 関わ る テク ニッ ク を 扱っ て ナビ ゲー ショ ン メ ニュ ー や ユー ザー フォー ム な ど 、Wep ペー 
いま す 。2 カ ラム 、3 カ ラム な どの 段 組み を 利用 し た レイ ア ジ の イン ター フェ イス に 関す る テク ニッ ク を 紹介 し て いま 
ウト や グリ ッ ド に 沿っ た レイ アウ ト な ど 、Web ペー ジ の 大 枠 す 。 イ ンタ ー フ ェ イ ス の 見 や すさ 、 使い や すさ は 、Web ペー 
を つく る 手法 で す 。 ジ の 印象 を 左右 する 大 切な ポイ ント で す 。 
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グラ フィ ッ ク ・ タ イボ グラ フィ 


属性 セレ クタ で 
写真 を 装飾 し た ギャ ラリ ー 










CSS3 で 追加 され た 属性 セレ クタ を 駆使 
し て 、 リン ク に アイ コン 画像 を 表示 し た り 、 
写真 に 視覚 的 な 装飾 を 施し た り で きま す 。 
ここ で は IE6 … 8 で も 見 た 目 を 整え る た 
め に JavaScript を 利用 し まし た 。 


本 編 で 制作 し て いる サン プル の 見 本 で す 







制作 の ポイ ント 
解説 を 理解 する 上 で 、 押 さえ て お きた い コ ー 
ディ ング 上 の 重要 な ポイ ント を 紹介 し て いま 
す 。 













制作 の ポイ ント 

生 属 性 セレ クタ の 条件 「^」、「$」、「*」 
の 使い 分 け 

尾 属 性 セレ クタ を 考え た マー クア ッ プ 


恒 IE で も 見 た 目 を 揃え る た め に 
JavaScript で 補う 


サン プル が 対応 し て いる ブラ ウザ 、 お よび バ 
ー ジ ョ ン の 情報 を 示し て いま す 。 お も に 
Internet Explorer は 6 以上 、Safari、Firefox 
Chrome に つい て は 原稿 執筆 時 点 の 最新 版 を 
対象 に し て いま す 。 サ プ バ パー ジョ ン は は 必要 に 
応じ て 記載 し て お り ま す 。 

また 「PE.」 と 記載 し て いる も の は 、 プロ グレ avaScript 
ッ シ プ ・ エ ン ハ ンス メン ト を 採用 し て 対応 さ 人 
せ て いる も の で す (プロ グレ ッ シ プ ・ エ ン ハ 

ンス メン ト に つい て は INTRODUCTION の 16 ペ YO PCHNMIC 3 

ー ジ の 解説 も ご 覧 くだ さい )。 ファ イル の 種類 別に アイ コン を 表示 要素 の 直後 に 内 容 を 挿入 する 
スマ ー ト フォ ン サ イト の 記事 で は 、iPhone 上 注 セ セ み の さ づ の 条 誠 久 け で 、 持 の 商 和 の 押 が 0 pfter 吉 人 

(i05)、Android で の 標準 プラ ウザ で の 検証 結 Ca od es と 


果 を 記載 し て いま す 。 記載 し て いる バー ジョ ON ここ 還 議 | 
ン は 05 の パー ジョ ン で す 。 本 を mA てい 

8 aa ES 

1 ea ー- 真 配置 

















サン プル を 制作 する 上 で 、 ど の よう な テク ニ 
ッ ク や デザ イン 的 な アイ デア が 盛り 込ま れ て 
いる か を 紹介 し て いま す 。 
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写真 画像 の 装飾 や 文字 の 表現 に 関す る テク ニッ ク を 紹介 し 
て いま す 。 ユー ザー が 興味 を 引か れる 、 視 覚 的 に 美しい ・ 
心地 よい Web ペ ー ジ を つく る に は 、 画 像 や 文字 を 装飾 する 
手法 が 欠か せな い 要 素 に な り ま す 。 





ベー ス の HTML を 作成 する 


CHAPTER 04 デザ イン パー ツ 


ボタ ン 、 野 線 、 背景 な ど 、 デ ザイ ン パ ー ツ の 装飾 方 法 を 紹介 
し て いま す 。CSS3 を 利用 する こと で 、 こ れ ま で は 画像 を 使 




















うこ と で し か 実現 で き な か っ た 装飾 が スタ イル 指定 で 可能 
に な る な ど 、 表 現 の 幅 が 広がり ます 。 





ndex html に 相思 の ょ 
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まず は ス に な る HTMLI て 。 て いる 件 分 岐 ガ メン ト で 
解説 し ます 。 サ ンプ ル は HTML5 で 作 

成 し て いま す 回 還 hmisjs 

IE8 以 下 の 古 い バ パー ジョ ン は HTML5 
対応 し て いな いた め 








na html5js の 本 み 込 み (index.ntm0 





ル ダ に html5.js を 格納 


回 himi5reset1.etcss 


http://code.google.com/p/h 
detail2name=html5reset-1.6.1.c: 









を can=2&q= 








href 属性 を 使っ て リン ク に 画像 を 表示 


プラ ウザ で 表示 させ た と ころ (CSS 半 用 前 ) 


Links 






で 要素 に 要素 で リン 
て いま す 功 軸 








http://html5shim.googlecode.com/svn/trunk/html5js 


5resetcss/downloads/ 


使用 する 外部 ファ イル 


サン ブル で 使用 し て いる プラ グイ ン や ライ ブ 
ラリ な ど を 、URL を 併記 し て 記載 し て いま す 。 









サン プル の ファ イル 群 の な か で 、 該 当 コ ー ド 
が 記述 され て いる ファ イル 名 、 お よび コー ド 
の 内 容 等 に つい て 記載 し て いま す 。 











ステ ッ プ の な か で 記述 し て いる コー ド で す 。 
改行 され て いて も 行間 に ライ ン が な い 場 合 は 、 
紙面 の 都合 上 で 改行 され て いる も の の 、 実際 
の コー ド は 1 行 で 記述 され て いる こと を 示し 
て いま す 。 解説 の た め に 行 番号 が 付 さ れ て い 
る 場合 も あり ます 。 
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COLUMN 


解説 文中 で 触れ られ な か っ た 補足 情報 、 仕 事 
で 応用 する 際 に 知っ て お きた い ポ イン ト や 注 
意 点 な ど を 記載 し て いま す 。 





※ 本 書 に 掲載 され て いる URL、 サ イト 名 、 
CSS、 お よび ライ ブラ リ な ど に 関す る 情報 
185 は 2012 年 1 月 現在 の も の で す 。 
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本 書 の サン プル デー タ に つい て 


サン プル デー タ の ダウ ン ロ ー ド 
本 書 に 掲載 され て いる サン プル デー タ は 、 弊 社 Web サイ ト の 本 書 の ペー ジ よ り ダ ウン ロー ド で きま す 。 
URL は 下記 の と お り で す 。 


ldB247A/A/ 有 IN 抽 月 | りん 4【 ル いり / イ 7 アド 7/ 





・ ダ ウン ロー ド し た ファ イル は ZIP 形 式 で 保存 され て いま す 。 


・Windows、Macintosh それ ぞ れ の 解凍 ソフ ト を 使っ て 圧縮 ファ イル を 解凍 し て くだ さい 。 





・ZIP フ ァイル は CHAPTER ご と に 分 か れ て いま す 。 
・ 解 凍 し た フォ ル ダ 内 に は 各 記 事 番 号 の フォ ル ダ が 収録 され て いま す 。 


・ 各 記事 番号 の フォ ル ダ に は 、 本 文 で 解説 し て いる HTML ファ イル や CSS5 ファ イル 、JS ファ イル 、 
画像 等 が 収録 され て いま す 。 


・ サ ンプ ルフ ァイル に は 「 は じ め に お 読み くだ さい .htmu ファ イル が 同 梱 され て いま す の で 、 
ご 使用 の 前 に 必ず 先 に お 読み くだ さい 。 


サン プル デー タ に 関す る ご 注意 


・ 弊 社 Web サ イト か ら ダ ウン ロー ド で きる サン プル デー タ は 、 本 書 の 解説 内 容 を ご 理解 いた だ く 
た め に 、 ご 自身 で 試さ れる 場合 に の み 使用 で きる 参照 用 デー タ で す 。 そ の 他 の 用 途 で の 使用 や 
配布 な ど は 一 切 で きま せん の で 、 あ ら か じ め ご 了承 くだ さい 。 た だ し 、 サ ンプ ル デ ー タ 中 に 含 
まれ る 一 般 に 公開 され て いる ライ ブラ リ 類 に つい て は 、 各 ライ ブラ リ の ライ セン ス 条 件 に 従い 
ます 。 


・ 弊 社 Web サ イト か ら ダ ウン ロー ド で きる サン プル デー タ の 著作 権 は 、 そ れ ぞ れ の 制作 者 に 帰属 
し ます 。 


・ 弊 社 Web サ イト か ら ダ ウン ロー ド で きる サン プル デー タ を 実行 し た 結果 に つい て は 、 著 者 お よ 
び 株 式 会 社 エ ム デ ィ エ ヌコ ー ポ レー ショ ン は 一 切 の 責任 を 負い か ね ます 。 お 客 様 の 責任 に お い 
て ご 利用 くだ さい 。 
































・ 本 書 に 掲載 され て いる HTML、CSS、JavaScript 等 の コメ ント や 改行 位置 は 、 紙 面 掲 載 用 と し 
て 加工 し て いる こと が あり ます 。 ダ ウン ロー ド し た サン プル デー タ と は 異な る 場合 が あり ます 
の で 、 あ ら か じ め ご 了承 くだ さい 。 








・ サ ンプ ル の な か に は 、Web サー バー の 機能 を 利用 する な どの 理由 か ら 、 ロ ー カ ル 環 境 上 で は 正 
し く 動 作 し な いも の が あり ます 。 こ の よう な サン プル の 場合 は 、Web サ ー バ ー 上 に 設置 し た う 
え で 機能 を お 試し くだ さい 。 
























は は せよ 111111 

















HH RE 
人柱 は は 提 SSR343 
1 















は は は 1 は 33+1 せ 11 せ 11 
















は 1 は す 1 は 1 すす せ せ は せ 1 せ 1 すす すす すす 1 
HHHHHHHHHHHHt は は 1 














は は 1 は 131 よせ 1 すす すす すす 
























は は 1 は 1 は 






























CSS3 Basic Lesson 


解説 / 境 祐司 





すす は すす すす 3 すす も すす 1 

























よ す 1 すす すす 1 すす すす 1 すす 1111 















は は すす 3 すす 1 すす 3 すす 1 


は 1 は す 1 は 1 は すす すす 1 































































は は 1 は 11 は は 

































































CSS3 を 理解 する 


CSS (Cascading Style Sheets) は 、HTML お よび XHTML で マー クア ッ プ され た 構造 化 文 書 の 視覚 表現 を 指定 する 
た め の 技 術 で す 。CSS3 は 、 現 在 策定 中 の 新しい 仕様 で す が 、 基 本 文法 な ど は 変わ り ま せん 。 


まず は 、CSS の 基礎 に つい て 理解 し て お きま し ょ う 。 


CSS の 役割 と 使い 方 


印刷 媒体 と Web ペー ジ の 違い 

Web ペ ー ジ の 特徴 は 、 構 造 化す る た め の 技 術 (HTML) 
と プレ ゼン テー ショ ン 技 術 (CS5) に よっ て 形作ら れ て い 
る こと で す 騙 軒 。 印 刷 媒体 と 比較 し て み ま し ょ う 。 

紙 に 印刷 され た 書籍 や 雑誌 は 、 人 間 に と っ て 見 や すい ・ 
読み や すい 紙面 で 提供 され 、 情 感 に 訴え る 魅力 的 な ビジ ュ 
アル デザ イン に な っ て いま す 。 ま た 、 テ キス ト が 中 心 の 媒 
体 な ど は 、 可 読 性 や 視認 性 が 重視 され て いる こと は 言う ま 
で も あり ませ ん 。 

Web ページ も プラ ウザ 上 で は 紙 媒体 と 同様 で す が 、 人 間 
だ け で は な く 、 機 械 (プロ グラ ム ) に 対し て も 正しい 情報 
を 伝え る 必要 が あり ます 。 な ぜ な ら 、 印 刷 物 と は 異な り 、 
さま ざま な 機器 で 閲覧 され る か ら で す 。 ブ ラウ ザ が 搭載 さ 
れ て いる 機器 は 、 パ ソコ ン だ け で は な く 、 携 帯電 話 か ら ス 
マー ト フ ォ ン 、 タ プレ ッ ト 、 ス マー ト テ レビ な ど 、 多 種 多 
様 で す 。1 種類 の デザ イン で は 対応 で き な い こと が わか る 
と 思い ます 押田 。 





HTML と CSS は 常に セッ ト で 考え る 

機械 (プロ グラ ム ) が 理解 で きる よう に 記述 され た 文書 
を 「 マ シン ・ リ ー ダ ブル 」 と 表現 し ます 。 人間 は 、 文 字 の 
大 き さ や 太 さ 、 配 色 、 配 置 な ど を 見 て 、 ペ ー ジ の 見 出し な 
の か 、 記 事 の 小見出し な の か 判断 する こと が で きま す が 、 


し I 





本 罰 Web ペー ジ を 閲覧 する 多様 な 機器 


PC Tablets 
デス クト ッ プ パソ コン タブ レッ ト 
プー トド ト パソ コシ 


UI 呈 十 還 叶 よ ]) ElUI 還 十 同人 は ) 


| | 
デス クト ッ プ 向け の 


スタ イル スタ イル 
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タブ レッ ト 向 け の 


機械 は 文書 の 意味 を 正しく 読み 取る こと が で きま せん 。 

そこ で 、 見 出し や 段落 、 図 版 な ど に 専用 の タグ (HTML 
の 要素 や 属性 ) を 付け て 、 意 味 を 定義 し ます 。 こ の 作業 を 
「 マ ー ク アッ プ 」 と 呼び ます 。 

マー クア ッ プ され た 文書 は 、 プ ラウ ザ 上 に は 表示 され ず 、 
あく まで 機械 に 意味 を 伝え る た め の 情 報 と し て 扱わ れ ま す 。 
つま り 、HTML は 文書 の 意味 を 定義 むす る た め の マ ー ク アッ 
プ 言 語 で あり 、 プ ラウ ザ 上 の 見 栄え を 決め る と き は CSS を 
使用 し な けれ ば いけ な い の で す 。Web ペー ジ の 可読性 や ビ 
ジュ アル の 美 し さ な ど 、 す べ て の 視覚 表現 は CSS に よっ て 
作ら れ ま す 。 

高 性 能 パ ソコ ン で も 、 非 力 な 携帯 電話 で も 、 マ シン リー 
ダ プ ブル な HTML ファ イル で あれ ば 、 文 書 の 意味 を 解釈 する 
こと が で きま す 。 ま た 、 見 出し だ け を 表示 し た り 、 図 版 を 
非 表 示 に する な ど 、 機 器 の 制限 に 合わ せ て 最適 化す る こと 
が で きま す 。 パ ソコ ン の ディ スプ レイ な ど 、 大 き な ス クリ 




















HTML と CSS の 役割 





構造 視覚 表現 






HTML に 9】 





機械 (プロ グラ ム ) に 情報 を 伝え る 人 間 に 情 報 を 伝え る 


Smartphones 
スマ ー ト フォ ン 


mw 回 


スマ ー ト フォ ン 向 け の 
スタ イル 


Cellphones 
携帯 電話 


HTML 











ー ン で は ( 段 組み レイ アウ ト な ど ) 印刷 物 に 近い 表現 が 可 
能 に な り ま す が 、 携 帯電 話 や スマ ー ト フォ ン な どの 小さ な 
スク リー ン で は 、 可 能 な 限り シン プル に 表示 し た ほう が 見 
や すく な り ま す 。 ま た 、 視 の 方 や 高齢 者 に 対し て は 文字 
を 大 きく 表示 し た り 、 視 覚 障がい 者 向け に 音声 読み 上 げ で 
情報 を 提供 する こと も 可能 に な り ま す 。 

さま ざま な 機器 で 閲覧 され る Web ペー ジ で は 、 構 造 と 見 
栄え の 分 離 が いか に 重要 か 理解 で きた と 思い ます 。 見 栄え 
の た め に 、 機 械 が 解釈 し に くい 構造 に な ら な いよ うに 注意 
し まし ょ う (見 出し を 画像 で ダラ フィ カル に 表現 する 際 、 
代替 テキ スト を 記述 し な いな ど )。CSS5 は 、 人 間 の た め の 
視覚 表現 技術 で す が 、 常 に マー クア ッ プ 言語 (HTML) と 
セッ ト で 考え な く て は いけ ませ ん 。 





(に に で ミソ トン セブン 1 


CSS (Cascading Style Sheets : カス ケー ティ ング ・ ス 
タイ ル シ ー ト ) は 、 Web 技 術 の 標準 化 を 推進 し て いる 組織 
「W3C」 に よっ て 策定 され て いま す 。 

CSS の 最初 の バー ジョ ン は 、1996 年 12 月 に 勧告 され ま 


W3C が 策定 する HTML と CSS の 歴史 


1993.6 1995.11 1997.1.14 1997.12.18 


1999.12.24 

















CSS3 を 理解 する 


し た 。W3C は 、 草 案 、 最 終 草 案 、 勧 告 修 補 、 勧 告 案 、 勧 告 
と いう 長い プロ セス を 経て 、 技 術 仕様 を リリ ー ス し て いま 
す 。 勧 告 に は 、 強 制 力 は あり ませ ん が 、 国 際 的 な 標準 規格 
と し て 受け 入れ られ て いま す 。 現在 普及 し て いる CSS2 は 
1998 年 5 月 に 勧告 、2011 年 6 月 に は 改訂 版 と な る CSS2.1 
が 勧告 され まし た 玉置 。 

現在 策定 中 の CS53 は 、 胎 大 か つ 複 雑 な 仕様 に な っ て い 
る た め 、 機 能 ご と に 「 モ ジュ ー ル 」 と し て 管理 され 、 開 発 
が 進め られ て いま す 。 例 えば 、 色 に 関す る 「CSS Color 
Module Level 3」 は 勧告 案 、 段 組み レイ アウ ト を 指定 する 
「CSS Multi-column Layout Module」 は 勧告 候補 、 縦 書 き 
な どの 仕様 が 含ま れる 「CSS Writing Modes」 は 草案 、 と 
いう 状況 で す (2012 年 1 月 現在 )。 

主要 な プラ ウザ は 、 こ れ ら の モジ ュー ル の 一 部 を 先行 実 
装 し て いま す が 、 サ ポー ト し て いる 仕様 は 異な っ て いま す 。 
アッ プ デ ー ト に よっ て 実装 状況 が 変化 し て いき ます の で 、 
CSS3 を 使用 する 場合 は 、 常 に 最新 の 情報 を 収集 し て お く 
必要 が あり ます 。W3C の サイ ト 抽 四 馬 借 に は 、 モ ジュ ー ル 
ご と の 開発 状況 を 一 覧 する こと が で きる 「CSS current 
work & how to participate」 ペ ー ジ が 用 意 さ れ て いま す の 
で 、 定 期 的 に チェ ッ ク し て お きま し ょ う 。 
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酸 罰 W3C の サイ ト で 公開 され て いる CSS の 総合 ペー ジ 
http://www.w3.org/Style/CSS/ 


2001.5.31 2010.11.23 


2002.8.1 








XHTML 
1.1 
Second 
E9iton 








証 舎 CSS3 の モジ ュー ル ご と の 開発 状況 を 一 覧 で きる ペー ジ 
http://www.w3.org/Style/CSS/current-work 
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CS5S の 基本 文法 ( 記 





CSS 基本 文法 の 習得 は 、「 セ レク タ 」、「 プ ロ パ ティ 」、「 プ 
ロ パ ティ の 値 」 を 理解 する こと か ら 始 まり ます 。 プログラ 
ミン グ の よう な 高度 な 専門 性 は 必要 あり ませ ん の で 、 短 期 
間 で マス ター で きる で し ょ う 。 





基本 的 な 記述 ルー ル 

CSS の 基本 的 な 記述 ルー ル は 、「 セ レク タ { プロ パテ ィ : 
値 」」 と な り ま す 罰 還 。 

例え ば 、 ペ ー ジ の 大 見 出し の 色 を 赤 で 表現 し た い 場 合 は 、 
「 ペ ー ジ の 大 見 出し { 文字 の 色 : 赤 ]」 で すか ら 、CSS で は 
「h1 { color : red }」 と 記述 し ます 。 プロ パテ ィ と 値 の 間 は 
コロ ン 「:」、 複 数 の 指定 が 続く 場合 は 、 行 未 ご と に セミ コ 
ロン 「:」 を 付け な く て は いけ ませ ん 。「h1 { color : red : 
font-size : 1em ]」 の よう に な り ま す 。 

h1 て h6 や p な ど 、HTML の 要素 名 を 対象 と し た セレ ク 
タ を 「 タ イプ セレ クタ 」 と 呼び ます 。 ペー ジ 全 体 に スタ イ 


CSS の 基本 文法 


セレ クタ [ プロ パテ ィ : 値 


[=ー| 
宣言 


宣言 ブロ ッ ク 


h1 { color : red } 





セレ クタ で 指定 し た スタ イル の 「 継 承 」 の 仕組 み 


html 





body 要素 に 対し て 適用 





body {color: green: } 


P 要素 内 に 含ま れる em 要素 に 対し て 適用 
pemt{color: red: } 


指定 し た スタ イル が 、 親 要素 か ら 子 要素 に 引き 継が れる 。「body { 
color:green: ]」 と 「p em { color:red: }」 を 同時 に 指定 する と 、 段 落 内 
の em 要素 だ け 文 字 色 が 赤 (color:red) に な り 、 そ れ 以 外 は すべ て 緑 
(color:green) に な る 
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ル を 指定 し た い の で あれ ば 、body 要素 を 対象 に し て 「body 
{ color: red }」 の よう に 記述 する こと が で きま す 罰 久 馬 思 
lo lolii 問 


id 属性 と class 属性 

特定 の 要素 を 識別 し な けれ ば いけ な い 場 合 は 、id 属 性 と 
class 属性 を 使い ます 。 

例え ば 、1 つ の 段落 だ け に スタ イル を 適用 し た いと き は 、 
<p class="co"> 記 事 の 本 文 </p> の よう に 、class 名 を 付け 
て お け ば 、『p.col { color: red: ]」 と 指定 する だ け で 、col 
と いう クラ ス が 記述 され て いる 段落 の み 赤 く 表 示さ れ ま す 。 

id 属性 の 場合 も 同様 に 、「<div id="hcol"><h3> 記 事 の 見 
出し </h3></div>。 の よう に 記述 し て お け ば 、「div#hcol { 
color: red: ]」 と いっ た スタ イル を 適用 する こと が で きま す 
(この 場合 は 記事 の 見 出し だ け 赤 く な り ま す )。1 ペー ジ 内 
で 1 回 し か 使用 され な い ペ ー ジ タイ トル な ど は id 属性 、 記 
事 の 小見出し な ど 1 ペー ジ 内 で 複数 回 使う 可能 性 が ある ス 
タイ ル に つい て は class 属性 を 使い まし ょ う 。 


セレ クタ の 種類 と 優先 順位 


優先 度 
ID セレ クタ 才 d name 
全 
クラ ス セ レク 人 タ .class name 


要素 名 [属性 名 ] 

要素 名 [属性 名 =" 属性 値 " ] 

要素 名 [ 属性 名 -=" 属性 値 " ] 
要素 名 [属性 名 に" 属性 値 " 


属性 セレ クタ 

















タイ プ セ レク タ 
h1 見 出し 1 P 段落 
h2 見 出し 2 address コピ ー ラ イト ・ 連 絡 先 な ど 
h3 見 出し 3 blockquote 引用 文 
h4 見 出し 4 
h5 見 出し 5 ul リス ト 分 割 グ ルー ブ 
h6 見 Le OI 番号 付き リス ト 
di 定義 リス ト ーー 
a リン ク ドー 
im 画像 の 挿入 
em EE] span 任意 の 範囲 指 定 
strong 強い 強 再 br 履行 
全 
ル セ レ クタ  ※( ア スタ リス ク ) 





@⑥ 


ベー シッ ク な セレ クタ に は 、 タ イプ セレ クタ 、ID セレ クタ 、 ク ラス セレ クタ 、 
属性 セレ クタ な ど が ある 。 スタ イル の 指定 が 競合 し た 場合 、 優 先 度 に よっ 
て 適用 され る 


アル レル アル メス シン ニシ アジ ァ アン シメ ン ル < 





現在 普及 し て いる デス クト ッ プ 環境 の Web ブ プラ ウザ に 
は 、Microsoft の Internet Explorer (IE)、Mozilla Firefox、 
Apple Safari、Google Chrome、0pera な ど が あり ます 。 ス 
マー ト デ バ イス (スマ ー ト フォ ン 、 タ プレ ッ ト な ど ) で は 、 
i0S 環境 の Mobile Safari と Android 環境 の Android Browser 
が 、 主 要 な プラ ウザ と な っ て いま す 。 

プラ ウザ に は 、HTML や CSS を 解釈 し て 表示 する た め の 
レン ダリ ング エン ジン が 搭載 され て お り 、IE は Trident ( ト 
ライ デン ト )、Firefox は Gecko( ゲ ッ コ ー)、Safari と Google 


『 タ イプ セレ クタ 」 以 外 の セレ クタ 


その 他 の セレ クタ 
子孫 セレ クタ 


selector selector 
selector > selector 


子 セレ クタ 


隣接 セレ クタ 


selector + selector 


提 似 クラ ス 


リン ク 擬 似 ク ラス :lInk 初期 状 態 (テキ スト リン ク ) 
:Visited リン ク 先 を 参照 し た 状態 


ダイ ナミ ッ ク 擬 似 ク ラス :hover カー ソル が 重なっ て いる 状態 
:actiVve クリ ッ ク し た と き の 状態 
foOCUS フォ ー カ ス さ れ た 状態 





before/:after 擬似 クラ ス :before 
:after 


折 rst-child 擬似 クラ ス :firstchild 
irst-line 擬似 クラ ス :firstline 
jrst-letter 擬似 クラ ス :firstLletter 


言語 擬似 クラ ス :lang() 


より 効率 よく 指定 する た め の セ レク タ と し て 、 子 孫 セ レク タ や 子 セレ クタ 、 隣 接 
セレ クタ な ど が 用 意 さ れ て いる 。 ま た 、 特 定 の 状態 の と き (参照 済み の ペー ジ 
リン ク の 色 を 変更 する 等 ) に スタ イル を 指定 で きる 、 擬 似 ク ラス な ど が ある 


外部 ファ イル に スタ イル を 記述 し 、HTML で 読み 込む 方 法 


<head> 


<link re に "styleshee''type="lexUcss"hre="style.css"> 
十 | CSS | </head> 


style.css 
<style type="texcss"> 


@import href="style.css": 
十 | CSS | <style> 


ylecs 





CSS ファ イル を 読み 込む 指定 は 、head 要素 内 に 記述 する 。link 要素 を 使う 方 
法 が 一 般 的 


CSS3 を 理解 する 


Chrome は WebKit (ウェ ブ キ ッ ト )、Opera は Presto ( プ 
レス ト ) が 採用 され て いま す 。 レ ンダ リン グ 処 理 に は 差異 
が ある た め 、 同 じ ペ ー ジ で も ブラ ウザ に よっ て 表示 結果 に 
違い が 出 て くる 場合 が あり ます 。 

また 、CSS3 の 先行 実装 に は 、 プ ラウ ザ ベ ン ダー ご と に 
異な る 接頭 辞 (ベン ダー プレ フィ ックス と 呼び ます ) が 
意 さ れ て いま す の で 、 併 記し な けれ ば いけ ませ ん 太 還 。IE 
は 「-ms-」、Firefox は 「-moz-」、Safari と Chrome は 
「-webkit-」、0pera は 「-o-」 を プロ パテ ィ の 頭 に 付け ます 
四 引 。 


























HTML ファ イル 内 に 直接 記述 する 方 法 
<style type="textcss"> 
Pt color: redi } 
HTML 
XHTML 7 
<p stye="color: red:"> 文章 <7p> 
HTML 


XHTML 


head 要素 内 に 記述 、 も し く は HTML 要素 の style 属性 に 直接 記述 する 方 
法 が ある 


馬 凡 プラ ウザ ご と に 異な る 接頭 辞 (ベン ダー プレ フィ ックス ) 


-ms- -moz-  -webkit- -0- 
@ と ) 
WebKit Presto 








ベン ダー プレ フィ ックス の 記述 例 





-webkit-column-count: 2: /* Safari and Chrome 前 





-moz-column-count: 2: /* Firefox 7 





column-count: 2: 
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CSS3 は まだ 策定 中 で す が 、 す で に 先行 実装 され て いる 
仕様 も あり ます 。 デ スク トッ プ 環 境 で は 、Internet Explorer 
(IE)、Firefox、Safari、Google Chrome、Opera の 最新 バ 
ー ジ ョ ン 、 ス マー ト デ バ イス は i05 の Mobile Safari、 
Android の 標準 プラ ウザ な ど が 、CSS3 の 一 部 の 仕様 を 試験 
的 に 実装 し て いま す 。 注意 し な けれ ば いけ な い の は 、 プ ブラ 
ウザ ご と の 実装 状況 の 確認 と 未 対応 の プラ ウザ に 対す る 処 
置 で す 。 実 装 状況 は プラ ウザ の アッ プ デ ー ト に よっ て 変化 
し て いき ます の で 、 定 期 的 な チェ ッ ク が 欠か せま せん 。 ネ 
ッ ト で も 複数 の サイ ト が 情報 を 公開 し て いま す の で 、 参 考 
に し まし ょ う 。 


プラ ウザ の 実装 状況 が 一 覧 で きる サイ ト 








When can luse.… (http://caniuse.com/) 


モバ イル プラ ウザ の 実装 状況 が 一 覧 で きる サイ ト 
Mobile HTML5 - compatibility tables for iPhone, Android, 
BlackBerry, Symbian, iPad and other mobile devices 


http://mobilehtml5.org/ 


先行 実装 され て いる CSS3 の 一 部 の 仕様 を 採用 する 場合 
は 、 サ イト の 方 針 を 明確 に し て お く こ と が 重要 で す 。「 プ 
ログ レッ シ プ ・ エ ン ハ ンス メン ト 」、「 ク ロス プラ ウザ 」 な 
どの 選択 肢 が あり ます 。 


プロ グレ ッ シ プ ・ エ ン ハ ンス メン ト 

現在 普及 し て いる 閲覧 環境 を 基準 に 設計 し た 上 で 、CSS3 
な どの 最新 の 技術 を 先行 実装 し た プラ ウザ 向け に リッ チ な 
コン テン ツ を 提供 する と いう 考え 方 で す 。 

な お 、「 プ ログ レッ シブ プ ・ エ ン ハ ンス メン ト 」 と 逆 に 、 先 
行 実装 され た 最新 の プラ ウザ を 基準 に 設計 し 、 古 い プ ラウ 


ザ な ど は 品質 を 落と し て 対応 する と いう 選択 肢 も あり ます 。 | 


この 考え 方 が 「 グ レイ ス フ ル ・ デ グラ デー ショ ン 」 で す 。 
「 グ レイ ス フ ル ・ デ グラ デー ショ ン 」 の 場合 に は 、IE6 や 7 
な どの 古い プラ ウザ も 切り 捨て ず 、 ア クセ シビ リティ を 損 
な わな いよ うに 対応 し ます が 、 見 た 目 に つい て は 考慮 し ま 
せん 。 
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クロ スプ ラウ ザ 

先行 実装 され た 最新 の プラ ウザ を 基準 に 設計 し 、 古 い プ 
ラウ ザ に 対し て も スク リプ ト を 駆使 し て 、 新 し い 環境 に 近 
づけ る と いう 考え 方 で す 。「 ポ リフ ィ ル (PoyfilU」 と 呼ば 
れ 、JavaScript の ライ ブラ リ な ど が 提供 され て いま す 。 古 
い ブ ラウ ザ を 力 業 で 最新 環境 に 近づけ る た め 、 処 理 が 重 た 
く な り ま す の で 動作 検証 は 必須 と な り ま す 。 

主 な JavaScritp ライ ブラ リ に は 以下 の よう な も の が あり 
ます 。 


HTML5.js 

HTML5 の 新 要 素 を サポ ー ト し て いな い IE8 以下 を スク リ 
プ ト で 対応 させ る JavaScript ラ イブ ラリ 。 
指定 方 法 : 

<!--[if lt IE 9]> 

<script src="http://html5shim.qooglecode.com/svn/trunk/html5. 
js"></script> 











<llendi-> 





HTML5 enabling script 


http://remysharp.com/2009/01/07/html5-enabling-script/ 


IE9.js 

IE5.5 ご 8 を IE9 の 実装 に 近づけ る た め の JavaScript ライ 
プラ リ 。CSS3 の セレ クタ が 使用 可能 に な り 、 透 過 PNG フ 
ァイル も 扱え る よう に な り ま す 。 便 利 な ライ ブラ リ で す が 
動作 検証 は 必須 。 


指定 方 法 : 


< ト -[if lt IE 9]> 
<Sscript src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ 








IE9.js"></script> 





<Mlendifl--> 





je7-js 


http://code.google.com/p/ie7-js/ 


Respond.js 

IE8 以下 で CSS53 の メデ ィ ア クエ リ (Media Queries) を 
利用 可能 に する JavaScript ラ イブ ラリ 。 ラ イブ ラリ を 設置 
し 、「<script src=".…/respond.src.js"></script>」 の よう 
に 記述 する だ け で す 。 


Respond 
https://github.com/scottjehVRespond 








CSS3 で 追加 され た セレ クタ 


CS53 で は 要素 の 属性 や 状態 な ど で 選 択 で きる 新しい セレ クタ な ど が 加わ っ た こと で 、 例 えば 段 ご と に 背景 色 を 設定 する 
よう な 指定 な ど 、CSS2.1 に は 備わっ て いな か っ た 高度 な セレ クタ の 組み 合わ せ が 可 能 に な り ま し た 。HTML の 構造 が シ 
ンプ ル か つ セ マン ティ ッ ク に な り 、CSS の 肥大 化 も 抑え る こと が で きま す 。 


CSS の スタ イル は 、「 セ レク タ { プロパティ : 値 :}」 の よ 
うに 、 セ レク タ を 使っ て 適用 し ます 。 

セレ クタ に は 、 タ イプ セレ クタ や ユニ バー サル セレ クタ 、 
クラ ス セ レク タ 、ID セ レク タ 、 属 性 セレ クタ 、 子 孫 セレ ク 
タ 、 子 セレ クタ 、 隣 接 セ レク タ 、 間 接 セレ クタ 、 擬 似 ク ラ 
ス 、 擬 似 要素 な ど が あり ます 。CSS3 で は 、「Selectors 
Level3」 と いう モジ ュー ル で 新しい セレ クタ が 定義 され て 
お り 玉 罰 、 ほ か に も 「 テ キス ト ・ フ ォ ン ト 」、「 レ イア ウト 
デザ イン 」、「 エ フェ クト 」 な どの 機能 別に モジ ュー ル が 用 
意 さ れ て いま す 押 寺 。 


CSS3 で 追加 され た 属性 セレ クタ 


属性 セレ クタ は 、 要 素 の 属性 と その 属性 の 値 を も と に 、 
対象 を 選択 する セレ クタ で す 放置 。 


E[foo^="bar"] 
foo (属性 名 ) で 指定 し た 値 が 、"bar" で 始ま る 場合 に 適 
用 され ます 。 
objectllype^="-/image/ リ {スタ イル の 5 定 世 





E[foo$="bar"] 
foo (属性 名 ) で 指定 し た 値 が 、"bar" で 終わ る 場合 に 適 
用 され ます 。 


E[foo*="bar"] 
foo (属性 名 ) で 指定 し た 値 に 、"bar" が 含ま れる 場合 に 
適用 され ます 。 
Pttle*="hello]{ スタ イル の 指定 】 








属性 セレ クタ の 一 覧 


騙 還 "Selectors Level 3」 
http://www.w3.org/TR/css3-selectors/ 


機能 別 カ テ ゴ リ と CSS3 の モジ ュー ル 


セレ クタ 


Selectors Level 3 





テキ スト ・ フ ォ ン ト 
CSS Fonts Module Level 3 
CSS Text Level 3 
CSS Writing Modes Module Level 3 
etc 


レイ アウ ト デ ザ イン 
CSS Multi-column Layout Module 
CSS Flexible Box Layout 
CSS Grid Layout 
etc 





フェ タ ド 


CSS 2D Transforms 
etc 





カラ ー・ イ メー ジ 


CSS Color Module Level 3 
etc 


リス ト 
CSS Lists and Counters Module Level 3 





) 1: ュ コ ピン シル 4 EEyE 


E[foo^="bar"] 


E[foo$="bar"] 


Elfoo*="bar"] 


an E element whose "foo" attribute value begins exactly with the string "bar" 
属性 「foo」 の 値 が 「bar」 で 指定 され た 文字 列 か ら 始ま る 場合 に 適用 


an E element whose "foo" attribute value ends exactly with the string "bar" 
属性 「foo」 の 値 が 「bar」 で 指定 され た 文字 列 で 終わ る 場合 に 適用 


an E element whose “foo" attribute value contains the substring "bar" 
属性 「foo」 の 値 に 「bar」 で 指定 され た 文字 列 が 含ま れる 場合 に 適用 





http://www.w3.org/TR/css3-selectors/#attribute-selectors 





に に で 折 全 に 69 た ヒネ だ さ :: ュ ウシ ルン 


擬似 クラ ス は 、 各 要素 の 状態 に よっ て 選択 する セレ クタ 
で す 罰 罰 。 各 要素 が 特定 の 条件 を 満た し た 状態 の と き に 、 
スタ イル を 適用 し ます 。 主 な 擬似 クラ ス の 記述 方 法 は 以下 
の 通り で す 。 


E:root 


E:nth-last-child(n) 


同じ 親 要素 を 持つ 兄弟 の 要素 で 、 後 ろか ら 何 番目 も し く 
は 奇数 ・ 偶 数 番目 の 要素 に 適用 され ます 。 
・ 記 述 例 A (後ろ か ら 奇 数 行 の 要素 に 適用 ) 




















スタ イル の 指 








・ 記 述 例 B (後ろ か ら 偶数 行 の 要素 に 適用 ) 














E:nth-child(n) 

同じ 親 要 素 を 持つ 兄弟 の 要素 で 、 前 か ら 何 番目 も し く は 
奇数 ・ 偶 数 番目 の 要素 に 適用 され ます 。 た と えば 、『2n+1」 
の 場合 は 、 前 か ら 1 番目 (2x0 十 1=1)、3 番 目 (2x1 1=3) 、 


trrnth-lastchild(2n+0) 【 スタ イル の 指定 } / trinth-last-child(even) 
{ スタ イル の 指定 } 





E:nth-of-type(n) 
同じ 親 要 素 を 持つ 同一 の 要素 で 、 前 か ら 何 番目 も し く は 
奇数 ・ 偶 数 番目 の 要素 に 適用 され ます 。 記述 例 の 場合 、 


5 番目 (2x2 十 1=5) …… の よう に 、 奇 数 番目 の 要素 が 対象 
に な り ま す 。「odd」 も 奇数 番目 に 適用 し ます 。 偶数 番目 は 
「even」 を 使い ます 。 

・ 記 述 例 A (奇数 行 の 要素 に 適用 ) 


「img」 が 指定 され て いま す の で 、 同 じ 親 要 素 を 持つ 兄弟 の 
要素 の 中 で 、img 要素 だ けが 対象 と な り ま す 。 


Hyper1) スタ イル の 抽 定 | 








E:nth-last-of-type(n) 
同じ 親 要素 を 持つ 同一 の 要素 で 、 後 ろか ら 何 番目 も し く 
は 奇数 ・ 偶 数 番目 の 要素 に 適用 され ます 。 
img:nth-lastof-pe(2nr1) { スタ イル の 指定 } 


tr:nth-child(2n+1) { スタ イル の 指定 } ノ trinth-child(odd) { スタ イル 





・ 記 述 例 B (偶数 行 の 要素 に 適用 ) 


trinth-child(2nx0) { スタ イル の 指定 } / trinth-child(even) {( スタ イル 
の 指定 } 





擬似 クラ ス の 一 覧 


リッ シレ ルル 適用 対象 

Eraot an E element, root of the document 
文書 の ルー ト 要 素 に 適用 

E:nth-child(n) an E element, the n-th child of its parent 


同じ 親 要 素 を 持つ 兄弟 の 要素 で 、 前 か ら 一 定 間隔 の 要素 に 適用 


an E element, the n-th child of its parent, counting from the last one 
同じ 親 要 素 を 持つ 兄弟 の 要素 で 、 後 ろか ら 一 定 間隔 の 要素 に 適用 


n E element, the n-th sibling of its type 
じ 親 要素 を 持つ 兄弟 の 要素 で 、 前 か ら 一 定 間隔 の 同一 要素 に 適用 


an E element, the n-th sibling of its type, counting from the last one 
同じ 親 要 素 を 持つ 兄弟 の 要素 で 、 後 ろか ら 一 定 間隔 の 同一 要素 に 適用 


an E element, first child of its parent 
じ 親 要素 を 持つ 兄弟 の 要素 で 、 最 初 の 要素 に 適用 


an E element, last child of its parent 
同じ 親 要素 を 持つ 兄弟 の 要素 で 、 最 後 の 要 素 に 適用 


an E element, first sibling of its type 
同じ 親 要 素 を 持つ 兄弟 の 要素 で 、 最 初 の 同一 要素 に 適用 


an E element, last sibling of its type 
同じ 親 要 素 を 持つ 兄弟 の 要素 で 、 最 後 の 同 一 要素 に 適用 


an E element, only child of its parent 

1 つ し か な い 子 要素 に 適用 

an E element, only sibling of its type 

同じ 親 要 素 を 持つ 兄弟 の 要素 で 、 | つ し か な い 子 要素 に 適用 


an E element that has no children (including text nodes) 
子 要素 が な い 空 の 要素 に 適用 


E:nth-last-child(n) 


E:nth-of-type(n) 





品 


E:nth-last-of-type(n) 








E:first-child 








E:last-child 


E:first-of-type 


E:last-of-type 


E:only-child 





E:only-of-type 


E:empty 





http://www.w3.org/TR/css3-selectors/#structural-pseudos 
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CSS3 で 追加 され た セレ クタ 




















CSS3 で 追加 され た ター ゲッ ト 擬 似 ク ラス : ス 」 罰 墨 、 指 定 し た セレ クタ 以外 の セレ クタ に 適用 され る 
: 「 否 定 擬似 クラ ス 」 副 軒 、 要 素 E の あと に 記述 され て いる 要 


アン カー リン ク の 対象 と な る 要素 に 適用 する 擬似 クラ ス 素 に 対し て 適用 され る 「 一 般 兄弟 結合 子 」 馬 冒 など が あり 

















が 「 タ ー ゲ ッ ト 擬 似 ク ラス 」(:target) で す 一 置 。 | まず す 。 
E:tarqet 一 般 兄弟 結合 子 

リン ク の ター ゲッ ト に 適用 され ます 。 た と えば 、「<p ! チルダ (^) を 結合 子 に し ます 。 記 述 例 で は 、h1 要 素 の 
id="note"> テ キス ト </p>」 の よう に ID 属性 を 記述 し て お : 後に 記述 され て いる ( 同 階 層 の ) 全て の pre 要素 に スタ イ 
け ば 、「<a href="#note"> ク リッ ク </a>」 の テキ スト リン : ル が 適用 され ます 。 
ク を クリ ッ ク す る と 、p 要 素 に スタ イル の 指定 が 適用 され : hu 見 軸 Lhi> 人 
ます 。 | 





#note:target {スタ イル の 指定 } 


h1 ~ pre {スタ イル の 指定 } 


この ほか に 、UI 要 素 (ラジ オ ボ タ ン や チェ ッ ク ボ ックス 
な ど ) の 状態 を 判定 し て 適用 する 「UI 要 素 状態 擬似 クラ 


ター ゲッ ト 擬 似 ク ラス 
シメ 0 レル レル. ESE 1 


an E element being the target of the referring URI 


EiargBt リン ク の ター ゲッ ト に 適用 


http://www.w3.org/TR/css3-selectors/#target-pseudo 


UI 要素 擬似 クラ ス 


UI 要素 擬似 クラス 適用 対象 

E:enabled auser interface element E which is enabled or disabled 

E:disabled disabled 属性 が な い 要 素 (:enabled)、 も し く は disabled 属性 が 指定 され て いる 要素 (:disabled) に 適用 
E:checked auser interface element E which is checked (for instance a radio-button or checkbox) 


checked 属 性 が ある 要素 (checked 状 態 の チェ ッ ク ボ ックス な ど ) に 適用 





http://www.w3.org/TR/css3-selectors/#Ulstates 


香 定 擬似 クラ ス 
も コリ シレ ルル 適用 対象 


Einot(S) an E element that does not match simple selectors 
Ne 指定 し た セレ クタ と 一 致し な い 要 素 に 適用 








http://www.w3.org/TR/css3-selectors/#negation 


馬 財 一 般 兄弟 結合 子 
一 般 兄弟 結合 子 適用 対象 


an F element preceded by an E element 


ES 要素 「E」 の 後に 記述 され て いる 要素 「F」 に 適用 





http://www.w3.org/TR/css3-selectors/#qeneral-sibling-combinators 
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CSS3 で 追加 され た プロ パテ ィ 


CSS3 で 新しく 追加 され た プロ パテ ィ を 利用 する こと で 、 文 字 組 の 指定 、 イ メー ジ (画像 ) を 使用 し な いと 表現 で き な か 1 
っ た ビジ ュ ア ル 効 果 な ど が 実現 可能 に な り ま し た 。 テ キス ト と フォ ント 、 エ フェ クト 、 カ ラー と イメ ー ジ な ど に 分 け て 、 主 
な 仕様 に つい て 解説 し て いき まし ょ う 。 


思 : CSS Text Level 3」 の プロ パテ ィ 一 覧 
テキ スト と フォ ント 改行 や 行 揃え 、 禁 則 処 理 な どの 組版 ルー ル の 指定 


CSS3 で は 、 テ キス ト や フォ ント の 仕様 が 大 幅 に 拡張 さ : 人 人 ki に 』 
れ て いま す 。 フォント 関連 の 仕様 「CSS Fonts Module 3 hanging-punctuation 句読点 の ぶら 下げ 組み の 指定 
Level 3」 馬 箇 、 テ キス ト 関 連 の 仕様 「CSS Text Level 3」 hyphens 単語 の 分 割 ( ハ イフ ネー ショ ン ) ヽ 
馬 財 、 組 み 方 向 な どの 仕様 「CSS Writing Modes Module iamer-spacing 文字 の 間隔 の 指定 人 
Level 3」 馬 便 など が あり 、Web フ ォ ン ト の 利用 や 禁則 処理 、 : * 
ー こ - 2 H line-break 禁則 処理 の 指定 【 
改行 の 調整 、 下 線 や 圏 点 の 調整 、 ド ロッ プシ ャ ドウ 、 縦 書 : 
き な ど 、 テ キス ト と フォ ント の 表現 力 が 向上 し て いま す 。 overflow-wrap 単語 の 改行 に つい て の 指定 
tab-size タプ の 幅 の 指定 
text-align 行 揃え の 指定 
回 較 'cSS プロ パテ ィ ー 0 
9 ゆ 科 と アジ の の 人 text-align-last 最終 行 の 行 揃え の 指定 
font フォ ント に つい て の 指定 を まとめ て 行う 
text-decoration-color 文字 の 線 の 色 を 指定 
font-family フォ ント の 種類 を 指定 
text-decoration-line 文字 の 線 の 種類 を 指定 


0penType フォ ント 機能 の 有効 ・ 無 効 の 


font-feature-settings > 示 に し た ミー 
切り 替え 、 装 飾 の 指定 text-decoration-skip 線 を 非 表 示 に し た い 部 分 (スペ ー ス 、 タ 





プ な ど ) の 指定 

font-kerning カー ニン グ に つい て の 指定 

text-decoration-style 文字 の 線 の スタ イル を 指定 
font-language-override 言語 の 種類 を 切り 替え る 指定 

text-emphasis 圏 点 を 表示 する 指定 
font-size フォ ント の サイ ズ を 指定 

text-emphasis-color 圏 点 の 色 の 指定 
font-size-adjust フォ ント の サイ ズ ( ア スペ クト 比 ) を 調整 

text-emphasis-position 圏 点 の 配置 の 指定 
font-stretch フォ ント を 縦長 ・ 横 長 に する 

text-emphasis-style 圏 点 の スタ イル の 指定 
人 ORSN フォ ント スタ イル (標準 ・ イ タリ ッ ク ・ 

PR 斜体 ) を 指定 する text-indent 最初 の 行 の 字 下げ (イン デン ト ) の 指定 
font-synthesis フォ ント 合成 の 指定 texjustify 両端 揃え 指定 の 調整 
font-variant フォ ント を スモ ー ル キャ プス で 表示 する text-shadow テキ スト の 影 ( ド ロッ プシ ャ ドウ ) の 指定 
9 あ 折 議 補 R RSS 

font-variant-alternates 修飾 文字 の 指定 ezSDaC8sGOUUaDse 白 文 字 の 処理 を 適用 する か どう か 指 
font-variant-caps スモ ー ル キャ プス に 切り 替え る 指定 

text-transform アル ファ ベッ ト の 大 文字 ・ 小 文字 の 指定 
font-variant-east-asian 異体 字 の 指定 

text-underline-position アン ダー ライ ン ( 下 線 ) の 配置 指定 
font-variant-position 上 付き ・ 下 付き の 指定 

text-wrap テキ スト の 折り 返し の 指定 
font-weight フォ ント の 太 さ を 指定 

NMeSSDaE 空白 文字 (スペ ー ス や タブ 、 改 行 ) の 処 
font-variant-ligatures 合 字 (リガ チャ ) の 指定 P 理 に つい て の 指定 
font-variant-numeric 分 数 表示 の 指定 word-break 文章 の 改行 に つい て の 指定 
http://www.w3.org/TR/css3-fonts/#property-index word-spacing 単語 の 間隔 の 指定 





http://www.w3.org/TR/css3-text/#appendix-h-full-property-index 
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Web フォ ント の 指定 


Web フ ォ ン ト は 、 サ ー バ ー 内 に ある フォ ント デー タ の 
URL と フォ ー マ ッ ト を 指定 し て 読み 込む 仕組 み で す 。 Web 
フォ ント を 利用 する こと で 、 ユ ー ザ ー の ロー カル 環境 に イ 
ンス トー ル さ れ て いな い フ ォ ン ト を 使っ て Web サ イト を 
表示 する こと が で きま す (※ あ ら か じ め フ ォ ン ト の ライ セ 
ンス に つい て 確認 し て お く 必 要 が あり ます )。 フ ォ ー マ ッ 
ト に は 、WOFF (Web Open Font Format) や TrueType、 
OpenType、SVG Font、 そ し て 、IE が サポ ー ト し て いる EOT 
(Embedded 0penType ) な ど が あり ます 。 

Web フォ ント を 読み 込む に は 、@font-face 規則 (The @ 
font-face rule) を 使っ て 、 ソ ー ス と な る URL や フォ ント 
の 種類 を 記述 し ます 。 以下 は 指定 で きる プロ パテ ィ と 記述 
例 で す 画 還 還 情 。 


文字 の 大 き さ の 自動 調整 


Web ペー ジ で 指定 され て いる フォ ント が 閲覧 し て いる 
デバ イス に な い 場 合 、 代 替 フ ォ ン ト が 表示 され ます が 、 文 
字 サ イズ の バラ ンス な ども 変わ っ て し まい ます 。 

font-size-adjust プロ パテ ィ で 、 数 値 (縦横 比 ) を 指定 
する と 、 自 動 調整 し て くれ ます (小文字 「x」 が 同じ 高 さ に 
な る よう に 調整 され ます )。 


TCSS Writing Modes Module Level 3』」 の プロ パテ ィ 一 覧 
( 縦 書き ・ 横 書き な どの 指定 ) 


direction 書 字 方 向 の 指定 


'caption-side' 表 組 み の キ ャ プシ ョ ン の 配置 


'column-width' カラ ム の 幅 


width "min-width', 幅 の 値 幅 の 最小 値 


"max-width', "height, 幅 の 最大 値 高 さ の 値 
"min-height, "max-height 高 さ の 最小 値 高 さ の 最大 値 
text-combine-horizontal 縦 組 み の グ リフ の 水平 合成 


8 縦 組 み の 水 平方 向 の グリ フ ・ ス ケー リン 
text-combine-mode グ 





縦 書き テキ スト 内 の 文字 の 





回 





text-orientation 転 





unicode-bidi 言語 ご と の 書 字 方 向 ル ー ル の 変更 


writing- mode 組み 方 向 ( 終 書 き ・ 横書き ) の 指定 


CS53 で 追加 され た プロ パテ ィ 


font-size-adjust 
に ーー none 
すべ て の 要素 
2 あり 
| 値 | <number> 1 none | inherit 
ht 。 
font-size-adjust 0.5: 











禁則 処理 の 指定 


文章 の 見 栄え を 整え る 禁則 処理 (行頭 に 「。」 や 「、」、 小 
文字 「 っ 」 な ど が 表示 され な い 等 ) の レベ ル に つい て 指定 
し ます 。 値 に は 、auto (プラ ウザ の デフ ォ ル ト )、loose 
(ゆる い )、normal (標準 )、strict (厳密 ) が あり ます 。 


加 必 還 auto 

国 王 醐 すべ て の 林 素 

四 還 本 3 あり 

国 加 還 較 autolloose lnormall strict 


_-ms-line-break: normat 


line-break:normal: 


@font-face で 指定 で きる プロ パテ ィ 


プロ パテ ィ 指定 する 内 容 


I 
人 
け 
計 


font-family フネ ォ ジ ドジ ファミ リー 
SrC フォ ント の ソー ス 
font-style フォ ント の スタ イル 
font-weight フォ ント の 太 さ 
font-stretch フォ ント の 横幅 




















unicode-| -range グリ フ の コー ド の 範 | 





http://www.w3. orgTRcss3- fonte/font- face-rule 


玉置 efont- face の 配 六 全 


_efont- に face{ 


_ font-family: 6 tiumr 








src: ur【(http://example. com/fonts/6entium, t6 


} 








http://www.w3.org/TR/css3-writing- 298a/Depeh index 
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自動 的 に 改行 され る ルー ル に つい て 指定 し ます 。 値 に は 、 
normal (日 本 語 、 中 国語 、 韓 国語 は 改行 され 、 そ の 他 は 言 
語 の ルー ル で 決ま る )、keep-all (日 本 語 、 中 国語 、 韓 国語 
は 単語 の 途中 で 改行 され な い 、 そ の 他 は 言語 の ルー ル で 決 
まる )、break-all (日 本 語 、 中 国語 、 韓 国語 以外 は 、 単 語 
の 途中 で も 改行 され る ) が あり ます 。 
























































word-break 

normal 

国 還 すべ て の 要素 

あり 

normal | keep-all | break-all 


DU 二 を 3 - ーー 
-ms-word-break:break-all: 








word-breakibreak-all 


] 


text-align プロ パテ ィ で 「justify」 (両端 揃え ) を 指定 し 
た 際 、 ご と の 規則 を 指定 する こと が で きま す 。 

値 に は 、auto (プラ ウザ の デフ ォ ル ト )、none (な し )、 
inter-word (スペ ー ス の 間隔 で 調整 )、inter-ideograph ( ス 
ペー ス の 調整 と 、 日 本 語 や 中 国語 な ど は 字 間 で 調整 )、 
inter-cluster (スペ ー ス の 調整 と 、 タ イ 語 や ミャンマー 語 
な ど は 字 間 で 調整 )、distribute (スペ ー ス の 調整 と 字 間 の 
調整 。 ア ラビ ア 語 や ベン ガル 語 な ど は 除く )、kashida ( ア 
ラビ ア 語 な ど ス ペー ス や 字 間 で 調整 で き な い 言語 を 引き 伸 
ば すこ と で 調整 ) が あり ます 。 








text-justify 
1 auto 
プ ブロッ ク 要 素 (オプ ショ ン と し て イン ライ ン 要 
素 も 適用 可能 ) 
継 庄 あり 
値 auto | none | inter-word | inter-ideograph | inter- 








cluster | distribute | kashida 


し ーー 
-ms-text-justify:inter-ideograph: 





text-justify:inter-ideograph: 


] 





文章 の 最後 の 行 に 対し て 、 行 揃え を 指定 し ます 。 値 に は 、 
auto (text-align プロ パテ ィ の 値 )、start ( 書 字 方 向 の 開 
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始 )、end ( 書 字 方 向 の 終端 )、left ( 左 )、right ( 右 )、center 
(中 央 )、justify (両端 ) が あり ます 。 


text-aliqgn-last 

1 auto 

プロ ッ ク 要 素 

あり 

auto | start | endlleft right | centerljustify 





- align-last:right: 
text-align-last:right 


text-decoration プロ パテ ィ で 、 指定 され た 下線 の 位置 を 
決め る こと が で きま す 。 値 に は 、auto (ブラ ウザ の デフ ォ 
ルト )、alphabetic (ベー スラ イン )、 below left (テキ スト 
の 下 に 表示 、 縦 書き で は 左 に 表示 )、below right (テキ ス 
ト の 上 に 表示 、 縦 書き で は 右 に 表示 ) が あり ます 。 

IE は 、 独 自 拡張 の below (below left と 同じ ) と above 
(below right と 同じ ) を 使用 し ます 。 


text-underline-position 

auto 

すべ て の 要素 

N あり 

琶 国 較 autolalphabetic [belowll[left | right]] 


pt | 
-ms-text-underline-position: below: 





text-underline-position: below left: 


} 


※ IE で は 、below (独自 拡張 ) で below left が 適用 され ま 
す 。IE7 以下 を 対象 と する 場合 は 、 ベ ンダ ー プ レフ ィ ッ ク 
ス 「-ms-」 を 付け ませ ん 。 








文章 の 一 部 を 「、」 や 「・」 な どの 記号 で 強調 する 「 
点 」 を 指定 し ます 。『text-emphasis: スタ イル 色 」 で 記述 
し ます 。 ス タイ ル に は 、dot (ドッ ト )、circle ( 丸 )、double- 
circle ( 二 重 丸 )、triangle (三角 )、sesame (ゴマ ) が あ 
り 、filled (塗り ) も し く は open ( 白 抜 き ) が 指定 で きま 
す 。 























text-emphasis 





none 
園 すべ て の 要素 
継 あり 
回 '<text-emphasis-style>' | "<text-emphasis- 
color>" 


span { 本 








-webkit-text-emphasis:ses 








text-emphasis:sesame red: 


} 





text-emphasis プロ パテ ィ で 、 指 定 さ れ た 圏 点 の 位置 を 
決め る こと が で きま す 。 値 に は 、 above right (テキ スト の 
上 、 縦 書き の 場合 は 右 )、below right (テキ スト の 下 、 縦 
書き の 場合 は 右 ) な ど が あり ます 。 


text-emphasis-position 

gp 肛 引 回 aboveright 

すべ て の 要素 

回 還 酸 3 あり 

本 加 還 本 [abovelbelow]&&[right | left] 


span { 





-webkit-text-emphasis-position:oVer: 
text-emphasis-position:above right: 


} 


Chrome で は 、above right が 「over」、below right が 
「under」 で 適用 され ます 。 


テキ スト に ドロ ッ プ シャ ドウ ( 影 ) を 適用 する こと が で 
きま す 。「text-shadow: 水平 方 向 の オフ セッ ト 値 垂直 方 
向 の オフ セッ ト 値 陰影 の ぼかし の 半径 (省略 可 ) 色 」 の 
よう に 記述 し ます 。 水平 方向 と 垂直 方 向 の オフ セッ ト 値 、 
ぼかし 半径 、 色 の 組み 合わ せ を セッ ト に し て 、 カ ンマ ()) 
で 区 切れ ば 、 複 数 指定 する こと が 可能 で す 。 








text-shadow 








TOTe 
和 すべ て の 要素 
あり 


none | [ <length>{2.31 && <color>? ]# 


CSS3 で 追加 され た プロ パテ ィ 

li IF 

_ text-shadow:3Px 3px 4px #999: 
] 








た た オスト た : 


文章 の 書 字 方 向 (横書き ・ 縦 書き ) を 指定 し ます 。 値 に 
は 、horizontal-tb (横書き で 行 が 上 か ら 下 へ 流れ る )、 
verticaLrL ( 縦 書 き で 列 が 右 か ら 左 へ 流れ る )、vertical-lr 
( 縦 書き で 列 が 左 か ら 右 へ 流れ る ) が あり ます 。 縦 書き の 

合 、 Windows 環境 で は 、 縦 書き 用 の フォ ント 名 (日 本 語 
の フォ ント 名 の 頭 に 「@」) を 指定 する 必要 が あり ます 。 

な お 、IE の 場合 は 、 独 自 拡張 の tr-tb (horizontaL-tb と 
同じ )、tb-rl (vertica-rL と 同じ )、tb-lr (vertica-lr と 同 
じ ) で 対応 する こと に な り ま す 。 





罰 本 略 』。=horizontal-tb 
較 すべ て の 要素 (適用 され な い : table row grouPs, 
table column groups, table rows, table columns) 
四 還 3 あり 
琶 回 還 蘭 horizontal-tb | verticaL-rL | vertica-lr 
htmt 
-webkit-writing-mode:vertica-rL: 
writing-mode:vertical-rL: 


【 


アニ メー ショ ン や トラ ンジ ショ ン な どの 特殊 効果 は 、 
JavaScript や Flash な どの 拡張 技術 を 使用 し て いま し た が 、 
CSS3 に は 「CSS 2D Transforms」 や 「CSS 3D Transforms 
Module Level 3」、「CSS Animations Module Level 3」 な 
どの 仕様 が 追加 され て お り 、CSS だ け で オプ ジェ クト の ア 
ニメーション や 3D 効 果 、 ス ライ ド シ ョ ー の トラ ンジ ショ 
ン 効 果 な ど を 簡単 に 実行 する こと が 可能 に な り ま し た 還 墨 。 

今後 は 、 Adobe Edge 凡 凡 な どの HTML5 / CSS3 アニメ 
ーション 制作 の オー サリ ング ツー ル が 普及 し て いく 可能 1 
が あり ます 。 














transform 

transform プロ パテ ィ は 、 対 象 と する 要素 に 対し て 、 移 
動 ・ 回 転 ・ 伸 縮 (拡大 ・ 縮 小 )・ 傾 斜 (シセ シアー) な どの 2 次 
元 ト ラン ス フ ォ ー ム 処理 を 実行 し ます 。 

移動 は translate()、translateX()、translateY()、 回 転 は 
rotate()、 伸縮 は scale()、scaleX()、scaleY()、 傾斜 は skew()、 
skewX()、skewY() を 指定 し ます (トラ ンス フォ ー ム 関数 と 
呼び ます )。 








ロ 
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none 
プロ ッ ク レ ベル 要素 、 イ ン ラ イン 要素 

な し 

回 none | <transform-function> [ <transform- 





function> 1* 





#obj { 
-moz-transform: translate(480px, 80px) scale(2, 2) 
rotate(120deg): 
-webkit-transform: translate(480px, 80px) scale(2, 2) 
rotate(120deg): 了 
-o-transform: translate(480px.80py) scale(2, 2) rotate(120deg): 














transform: translate(480px, 80px) scale(2. 2) rotate(120deg): 
り 





カラ と イメ ー ジ 


CSS2.1 で ポッ クス の 角 を 丸く し た り 、 テ キス ト に 陰影 を 
つけ る に は 、 イ メー ジ (画像 ) を 使用 し ます 。 こ れ ら の 視 
覚 表現 は 、 div 要 素 を 増加 させ 、 CSS を 複雑 に し て し まう な 
ど 、 ア クセ シビ リティ 上 の 問題 や メン テ ナ ン ス 性 の 低下 な 
ど が 指摘 され て きま し た 。 

C553 に は 、「CSS Color Module Level 3」 や 「CSS 
Backgrounds and Borders Module Level 3」 な どの 仕様 
が 追加 され て お り 、 角 丸 の 指定 や ボッ クス の ドロ ッ プ シャ 
ドウ 、 線 形 お よび 円 形 の グラ デー ショ ン 表 示 、 複 数 の 背景 
画像 を 重ね て 表示 する 機能 な ど 、 今 まで 画像 で 表現 し て き 
た ビジ ュ ア ル デ ザ イン を CSS だ け で 指定 で きる よう に な 
り ま し た 罰 四 。 


Border-radius 

border-radius プロ パテ ィ は 、 対 象 と する ボッ クス の 角 
を 丸く し ます ( 角 丸 の 半径 の 値 を 指定 し ます )。 値 が 1 つ 
の 場合 は 、4 つ の 角 に 適用 され 、2 つ の 場合 は 左上 と 右 下 の 
角 、 右 上 と 左下 の 角 に それ ぞ れ 適用 され ます 。3 つ な ら 左 
上 、 右 上 と 左下 、 右 下 の 角 、4 つ の 場合 は 、 左 上 か ら 時 計 





馬 灸 アニ メー ショ ン 、 ト ラン ジ シ 
CSS 2D Transforms 


ョ ン な ど エ フェ クト 関連 の モジ ュー ル 


http://www.w3.org/TR/css3-2d-transforms/ 


CSS Animations Module Level 3 


http://www.w3.org/TR/css3-animations/ 


CSS 3D Transforms Module Level 3 


http://www.w3.org/TR/css3-3d-transforms/ 


Adobe Edge 


http://labs.adobe.com/technologies/edge/ 
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回 り に 適用 され ます 。 

0 

すべ て の 要素 (border-collapse の 値 が collapse 

の table 要素 は 除く ) 

還 還 3 な し 

[ <length> | <percentage> 1.4} [ / [ <length> | 
<percentage> 1,41 ]2 

_#contenst 。 

、 border solid 3px #039: 

















ler-radius: 18pxi 








rder-radius: 18px: 





border-radius: 18px: 





所 


リス ト 関 連 で は 、CSS2.0 で 定義 され て いた 漢 数 字 「 一 、 
二 、 三 」 や ひら が な 「 あ いう え お / い ろ は 」、 カ タカ ナ 「 ア 
イ ウ エ オ ノイ ロ ハ 」、 へ プラ イ 数 字 な どの リス トマ ー ク 
(CSS2.1 で は 削除 ) が 、CSS3 で 復活 し て いま す 還 週 。 


list-style 

list-style プロ パテ ィ は 、「list-style: リス トマ ー ク の 種類 
イメ ー ジ (画像 ) 表示 する 位置 」 の よう に 指定 し ます 。 値 
は 省略 可能 で す 。 CSS3 で は 、 CSS2.1 で 削除 され 、 再 び 採 
用 され た 漢 数 字 (cjk-ideographic) や ひら が な (hiragana) 、 
カタ カナ (katakana) な ど が 使用 で きま す 。 





還 選 還 discnone outside 
「display: list-item」 の 要素 
あり 
還 還 較 ist-style-type> <list-style-position'> < 
'list-style-image> 
lt 
let-stWercjk-ideographic: 


本 ーー 











馬 罰 カラ ー・ イ メー ジ 関 連 の モジ ュー ル 

CSS Color Module Level 3 
http://www.w3.org/TR/css3-color/ 

CSS Backgrounds and Borders Module Level 3 


http://www.w3.org/TR/css3-background/ 


馬 軒 CSS Lists and Counters Module Level 3 


http://www.w3.org/TR/css3-lists/ 


レイ アウ ト デ ザ イン 


CSS2.1 で の 段 組 み レ イア ウト の 表現 は 、float プ ロ パ ティ で 要素 を 浮動 化し て 幅 の 値 を 与え る こと で 、 後 続 の 要素 を 水平 
方 向 (左右 どちら か ) に 並べ て いま し た 。 CSS3 で は 段数 を 指定 する な ど 、 より 直感 的 に 表現 で きる 機能 が 追加 され て お 
り 、 最 新 の 機能 を 組み 合わ せ て 指定 すれ ば 、 高 度 な レイ アウ ト も 簡単 に 構築 する こと が 可能 で す 。 


マル チカ ラム レイ アウ ト 


「 マ ル チ カ ラム レイ アウ ト 」 で は 、 段 数 や 段 の 幅 、 間 隔 、 
野 線 な ど を 指定 する こと が で きま す 罰 軒 。 段数 は 
column-count プ ロバ パテ ィ 、 段 の 幅 は column-width プロ 
パテ ィ で 指定 し ます 。 た と えば 、「column-count: 3:」 と 
記述 する と 3 段 組 み で 表示 され ます 。 組 方 向 が 横 の 場合 、 
左側 の ボッ クス か ら 順 に 流し 込ま れ ま す 。 

段 の 間隔 は 、column-gap プロ パテ ィ で 指定 し ます 。 
「column-gap: 32px:」 と 記述 する と 、 段 と 段 の 間隔 は 32 
ピク セル に な り ま す 。 

段 と 段 の 間 に 表 示す る 肢 線 (区 切り 線 ) は 、column-rule 
プロ パテ ィ で 指定 し ます 。「column-rule: 1px solid 寿 00:」 
と 記述 する と 、 太 さ 1 ピ クセ ル の 単線 が 赤 で 表示 され ます 
Lo: 庄 

マル チカ ラム レイ アウ ト で は 、 ボ ックス の 段 の 数 を 
column-count プロパ ティ (1 以上 の 整数 値 を 指定 ) を 使用 


馬 較 CSS Multi-column Layout Module」 の プロ パテ ィ 一 覧 
(マル チカ ラム レイ アウ ト の 指定 ) 


4=『 ム て 指定 内 容 


改 ペ ー ジ ・ 改 段 の 挿入 位置 (ボッ クス の 


break-after 前 ) の 指定 

DPSBKSD8fGFE 改 ペ ー ジ ・ 改 段 の 挿入 位置 (ボッ クス の 
後 ) の 指定 

Bkllidg 改 ペ ー ジ ・ 改 段 の 挿入 位置 (ポッ クス 
内 ) の 指定 

column-count 段数 の 指定 

column-fill 段 の 高 さ を 揃え る 指定 

column-gap 段 と 段 の 間隔 の 指定 

column-rule 段 の 区 切り 線 の 指定 


column-rule-color 区 切り 線 の 色 の 指定 


column-rule-style 区 切り 線 の スタ イル の 指定 


column-rule-width 区 切り 線 の 太 さ の 指定 
columns 段 の 幅 と 段数 の 指定 
column-span 複数 の 段 を 買 く 表示 の 指定 
column-width 段 の 幅 の 指定 





http://www.w3.org/TR/css3-multicol/#property-index 





し て 指定 し ます 。 段 の 幅 を 指定 する column-width プロ パ 
ティ と 組み 合わ せ て 使う こと が 可能 で す 。 


column-count 

auto 

プロ ッ ク レ ベル 要素 (置換 要素 、table 要素 を 除 
く )、th 要素 ・td 要素 、 イ ン ラ イン プロ ッ ク 要 素 
な し 

<integer> | auto 





#contents { 





-moz-column-count:2: 





-webkit-column-count:2: 





column-count:2: 


} 








馬 購 記事 に 「CSS Multi-column Layout Module」 の 機能 を 適用 
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フレ キシ ブル ボッ クス レイ アウ ト 


マル チカ ラム レイ アウ ト は 、1 つ の ボッ クス を 分 割 し て 
段 組 み を 表現 し ます が 、 フ レキ シブ ル ボ ックス レイ アウ ト 
は 、 複数 の ボッ クス を 水平 方 向 に 配置 し ます (float プ ロバ 
ティ を 使っ た 段 組 み の 手法 に 近い 仕様 で す ) 還 合 本 放 。 

複数 の ボッ クス を 含有 する 親 ポ ックス に 対し て 「display: 
box:」 と 指定 すれ ば (※IE の ベン ダー プレ フィ ックス 
「-ms-」 を 付け ます )、 ボ ックス が 水平 方 向 に 並び ます 。 ボ 
ックス の 高 さ を 自動 的 に 揃え て くれ ます の で 、 意 図 し な い 
空白 が 発生 し て バラ ンス が 崩れ る こと も あり ませ ん 。 

ボッ クス に display プロ パテ ィ を 使用 し 、「flexbox」 を 指 
定 す る こと で ブロ ッ ク 要 素 と し て 扱わ れ 、 フ レキ シ プ ブル ボ 
ックス が 有効 に な り ま す 。 デ フォ ルト で は 、 水 平方 向 ( 左 
か ら 右 ) に 並び ます が 、box-orient プロ パテ ィ を 使え ば 、 垂 
直方 向 に 並べ る こと が で きま す 。 


display 
罰 還 隆 還 inline 


CS5S Flexible Box Layout Module」 の プロ バテ ィ 一 覧 
(フレ キシ ブル ボッ クス レイ アウ ト の 指定 ) 


アス =『 ム と に か ヨド ト 3 

display ボッ クス (flexbox) の 種類 の 指定 
flex-align 垂直 方 向 の 揃え 

flex-flow ボッ クス (flexbox) の 方 向 


flex-line-pack 複数 行 の ポッ クス (flexbox) の 揃え の 指定 


flex-order ボッ クス (flexbox) の 表示 順 


flex-pack 水平 方 向 の 揃え 





http://www.w3.org/TR/css3-flexbox/#property 


ナビ ゲー ショ ン に 『CSS Flexible Box Layout Module」 の 機能 を 適用 
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すべ て の 要素 

な し 

flexbox | inline-flexbox (※box | inline-box か 
ら 変 更 さ れ て いる が ベン ダー プレ フィ ックス は 
以前 の まま ) 





navt 





display: -moz-box: 





display: -webkit-box: 





display: -ms-box: 





display: flexbox: 
width: 200px: 











グリ ッ ド レイ アウ ト 


「 グ リッ ドレ イア ウト 」 で は 、 適 用 し た い 領 域 に 対し て 
「display: grid」 を 指定 し (※IE の ベン ダー プレ フィ ックス 
「-ms-」 を 付け ます )、 グ リッ ドコ ン テ ナ と し て 定義 し て お 


馬 計 「Grid Layout」 の プロ パテ ィ 一 覧 
(グリ ッ ド レイ アウ ト の 指定 ) 


レル = リム と に コバ ト 】 
grid-columns 列 の 幅 の 指定 
grid-rows 行 の 高 さ の 指定 
grid-column 列 の 番号 の 指定 
grid-row 行 の 番号 の 指定 
grid-cell グリ ッ ド セル の 指定 


grid-cell-stacking グリ ッ ド セル の 重なり の 方 向 の 指定 


grid-template グリ ッ ド セル 構造 の 指定 


grid-column-span 列 の 数 の 指定 
grid-row-span 行 の 数 の 指定 
grid-column-sizing 列 の 幅 の 算出 方 法 の 指定 
grid-row-sizing 列 の 高 さ の 算出 方 法 の 指定 
grid-flow 方 向 の 指定 
grid-column-align 列 の (水平 方 向 ) 揃 え の 指定 
grid-row-align 行 の (垂直 方 向 ) 揃 え の 指定 
grid-layer 重ね 順 の 指定 





http://www.w3.org/TR/css3-multico り #property-index 


きま す 。 続け て 、 行 と 列 を 指定 し 、 分 割 さ れ た 領域 に コン 
テン ツ を 配置 し て いき ます 。 

列 は 、grid-cotumns プロ パテ ィ で 定義 し ます 。「grid- 
columns: 15% 609% 259%」 の 場合 、1 列 目 の 幅 が 159%%、2 
列 目 が 60%、3 列 目 が 25% の 幅 に な り ま す 。 行 は 、grid- 
rows プロ パテ ィ で 定義 し ます 。 数値 で は な く 、「auto」 を 
指定 する と 、 内 容量 に あわ せ て 自動 的 に 値 を 算出 し て くれ 
ます 。 

ボッ クス に display プロ パテ ィ を 使用 し 、「grid」 を 指定 
する と 、 グ リッ ドレ イア ウト が 有効 に な り ま す 。 列 の 横幅 
は 、 grid-columns プロ パテ ィ で 数 値 も し く は 比率 (fr) を 
指定 し ます (fr は 割合 の 単位 で す ) 還 軒 馬 還 。 


display 

図 本 量 韻 inline 
すべ て の 要素 
回 是 国 な し 


還 還 蘭 gridlinline-grid 


#container { 


、 display: ms-gridi 








display:grid: 





-ms-grid-columns: 76% 24%: 
_ grid-columns: 769% 24%6: 
隊 width: 960px: 
ル 











馬 罰 web ペー ジ の 基本 レイ アウ ト に 「Grid Layout」 の 機能 を 適用 
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レイ アウ ト デ ザ イン 


その 他 の レイ アウ ト 仕様 


「CSS Regions Module Level 3」 面 罰 や 「CSS Template 
Layout Module」 馬 軒 は 、 今 まで 不可 能 だ っ た 紙 媒体 の 高 
度 な ペー ジ デ ザイ ン 技 術 を ブラ ウザ 上 で 表現 する こと が で 
きま す 。 エ ディ トリ アル デザ イン の 領域 に 近づく こと で 、 
電子 書籍 や 電子 雑誌 な どの 基礎 技術 と し て 普及 する 可能 性 
も あり ます 。 


TCSS Regions Module Level 3」 の プロ パテ ィ 一 覧 
(高度 な 流し 込み レイ アウ ト の 指定 ) 


flow-into 指定 され た フロ ー 領 域内 に 要素 を 置く 
指定 され た フロ ー 領 域 と 結び つけ る 


改 ペ ー ジ ・ 改 段 の 挿入 位置 (ボッ クス の 前 ) の 
指定 


改 ペ ー ジ ・ 改 段 の 挿入 位置 (ボッ クス の 後 ) の 
fbreak-after 指定 


flow-from 


break-before 


改 ペ ー ジ ・ 改 段 の 挿入 位置 (ポッ クス 内 ) の 指 


break-inside 定 


指定 され た フロ ー 領 域 と 結び つい た 最後 の 領 
域 の 指定 


特定 の 領域 に 指定 


region-overflow 


@region 





http://www.w3.org/TR/css3-regions/ 


『CSS Template Layout Module」 の プロ パテ ィ ー 覧 
(高度 な ポジ ショ ニン グレ イア ウト の 指定 ) 


プロ パテ ィ 指定 内 容 
display 要素 が 生成 する ボッ クス の 種類 の 指定 
position ボッ クス の 配置 の 指定 
chains スロ ッ ト の 連結 の 指定 

改 ペ ー ジ ・ 改 段 の 挿入 位置 (ボッ クス の 前 ) の 
break-before 

指定 

改 ペ ー ジ ・ 改 段 の 挿入 位置 (ボッ クス の 後 ) の 
break-after 

指定 

. 改 ペ ー ジ ・ 改 段 の 挿入 位置 (ポッ クス 内 ) の 指 

break-inside 定 





http://www.w3.org/TR/css3-layout/ 


レグ 4 








CSS2.1 に は 、 メ ディ アタ イプ を 指定 する こと が で きる 
「@media」 が あり 、 対 象 と する メデ ィ ア に 専用 の スタ イル 
を 適用 する こと が で きま す 。 

メデ ィ ア タイ プ に は 、screen (コン ピュ ー タ の 画面 ) 、 
print (ペー ジ 出 力 ) 、 handheld (小さ な 画面 で 帯 域 の ハ 
ンド ヘル ド デ バ イス )、projection (プロ ジェ クタ な ど ) 、 
speech (音声 合成 出力 ) な ど 10 種 類 が あり ます 。 

CSS3 で は 、「Media Queries」( メ ディ アク エリ ) が 定義 
され 、 よ り 詳 細 な 条件 で スタ イル を 適用 で きる よう に な り 
まし た 玉 講 。 デ バイ ス の スク リー ン サ イズ や 解像度 、 縦 横 
比 、 色 数 、 デ バイ ス の 向き 、 ブ ラウ ザ の 横幅 や 高 さ を 条件 
と し て 、 専 用 の スタ イル を 指定 する こと が で きま す 。 メ デ 
ィ ア クエ リ を 使用 する こと で 、 デ バイ ス ご と に コン テン ツ 
を 最適 化し な く て も 、 和 柔軟 に 適 店 させ る こと が 可能 に な り 
ます 玉 司 。 


メデ ィ ア クエ リ の 基本 的 な 記述 例 
<h1> タ イト ル </h1> 











ー httcolerred:) ーー _ 


} 





_@mediaalt 。 
_ httcolor:red:] 


] 





馬 軒 Media Queries 


http://www.w3.org/TR/css3-mediaqueries/ 


メデ ィ ア クエ リ の 主 な 特性 、 条 件 、 値 に 関す る 一 覧 表 


メデ ィ ア 特性 条件 

width プラ ウザ の ウィ ンド ウ の 幅 
height プラ ウザ の ウィ ンド ウ の 高 さ 
device-width デバ イス の スク リー ン の 幅 


device-height デバ イス の スク リー ン の 高 さ 


aspect-ratio ブラ ウザ の ウィ ンド ウ の 縦横 比 


device-aspect-ratio デバ イス の スク リー ン の 縦横 比 


orientation デバ イス の 方 向 
resolution 解像度 
color 色 数 (ビッ ト 数 ) 
color-index カー テー ジル 
グレ ー ス ケー ル の 庶 調 (ビッ ト 数 ) 


monochrome 





メデ ィ ア 特性 と 条件 を 指定 する 記述 例 


@media screen and (min-width:960py) { 
h1 { color: red:} 

} = wo 

プラ ウザ の 表示 領域 の 幅 が 960 ビ クセ ル 以 上 の 場合 、 タ イト ル の 色 を 

赤 に する 




















_@media screen and (min-width:480px) and (max-width:960py) ( ミ 
h1 { color: red: } ーー 








} 
プラ ウザ の 表示 領域 の 幅 が 、480 ピ クセ ル 以 上 、960 ビ クセ ル 以 下 の 場 
合 、 タ イト ル の 色 を 赤 に する 


@media screen and (min-device-width:768px) and (max-device- 








h1 { color: redi} 
} 





デバ イス の スク リー ン の 幅 が 、768 ビ クセ ル 以 上 、1024 ビ クセ ル 以 下 。 
の 場合 、 タ イト ル の 色 を 赤 に する 


デバ イス の 方 向 で スタ イル を 適用 する 記述 例 
@media screen and (orientation: landscape) { 
h1 color:red:] 
二 ーー si 
デバ イス を 横向 き (ラン ドス ケー プ モ ー ド ) に し た 場合 、 タ イト ル の 
色 を 赤 に する 





値 最小 / 最大 
数 値 min/max 
数 値 min/max 
数 値 min/max 
数 値 min/max 
比率 ( 横 / 縦 ) min/max 
比率 ( 横 / 縦 ) min/max 


Portrait( 縦 )/landscape( 横 ) - 


dpi, dpcm min/max 
数 値 min/max 
数 値 min/max 


数 値 min/max 
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マル チ デ バイ ス に 対応 し た レス ポン シブ な Web ペー ジ 
flexbox を 使っ た 柔軟 な ボッ クス レイ アウ ト 

ナビ ゲー ショ ン の 位置 を 固定 し た Web ペー ジ 

アア あみ 4 アル 時 )E 必 っ リヒ スシ ルン アメ ノア ルル ピコ ゴン シル アン 
グリ ッ ド レイ アウ ト で 実現 する レス ポン シブ プ な サイ ト 

透過 画像 を 効果 的 に 組み 合わ せ た デ ザイ ン 

CSS3 と 画像 を 組み 合わ せ た ア ナ ロ グ テイ スト の デザ イン 
テキ スト が 読み や すい 段 組 み レ イア ウト 
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マル チ デ バイ ス に 対応 し た 


ピア に ジス ン ア シル” //-] '【 ペ ニャン 





1 つの ソー ス で 、PC、 タ ブレ ッ ト 、 ス マ 
ー ト フォ ン な ど 、 画 面 サ イズ の 異な る 複 
数 の デバ イス に 対応 する レス ポン シブ 
Web デザ イン を 採用 し た Web ペー ジ を 
紹介 し ます 。 メ ディ アク エリ を 利用 し て 、 
各 デ バイ ス の ディ スプ レイ の 幅 に 応じ た 
表示 に 切り 替え ます 。 


制作 ・ 文 山本 圭 助 
(株 式 会 社 ラナ デザ イン アソ シ エ イ ツ ) 


SCNR nodecden sem 







Access 。 Conact 






we create stylish design. 


Lorm ipaum is simpy dummy text of the printng and 
VPSsertng Industry LsTandard Gummy tert ever since the 
1500s.when an unknown printertooK a oaley of type 
ndscrambled t to make a De *pecimen 





制作 の ポイ ント 

目 レ スポ ン シ ブ プ Web デザ イン の 考え 方 
時 メデ ィ ア クエ リ の 使い 方 

上 Internet Explorer へ の 対応 


read more reed more reed more 


[ 必 。 〉 PE. | [Safari >5.1 以 上 ] 





| Firefox > 8 以上 | |Chrome〉15 以上 | 





※IE8 以下 は コン ディ ショ ナル コメ ント で 対応 。 








ワン ソー ス で 多く の デバ イス に 対応 メデ ィ ア クエ リ の 使用 


レス ポン シブ Web デ ザイ ン と 
は 、Web サイ ト を 閲覧 する 環境 
に あわ せ て 最適 な レイ アウ ト を 
人 _ we create stylish design. 
表示 させ る 方 法 で 、1 つの ソー ee 
TPPefPahATNhohNTPyNkeet 


ス で 多く の デバ イス に 対応 させ | - 志 | | - 編 | wrterveerowtnes 
る こと が で きま す 。 と ペー 本 ょ 夫 


画面 サイ ズ に 合わ せ て スタ イル 
を 切り 替え る に は 、 メ ディ アク 
エリ を 使用 し ます 。 





SCNR 


Apeut 。 worke Accews Contect 






we create 
| 
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メデ ィ ア クエ リ と は 、 link 要素 と style 
要素 の media 属性 で 、 表示 対象 と な る 
メデ ィ ア の 種類 を 特定 する こと を 可能 
に し ます 回 還 。 @import で も 使用 で き 
ます 。 

媒体 型 と 媒体 特性 を 、 キ ー ワ ー ド を 使 
用 し て 指定 し ます 回 認可 還 。 








MEM0 m 


サン プル で は コン テン ツ を タプ の 形式 で 
レイ アウ ト し て いま す 。 こ の 手法 に つい 
て は CHAPTER02-02「 表 示 内 容 を 切り 替 
える タプ ナビ ゲー ショ ン の 実装 」(96 ペ 
ー ジ ) で 詳し く 解 説 し て いま す 。 





画面 幅 が 921px 以上 、920px ~ 361px、 
360px 以下 の 3 種類 を 表示 分 けし ます 
CZ 広 。 


回 














し | - コ | 


メデ ィ ア クエ リ の 使い 方 


回 較 メデ ィ ア クエ リ 
キー ワー ド カン マ (OR 検索)、and、not 


| screen (一 般 的 な ディ スプ レイ ) 、projection (プロ ジェ クタ ー) 、 
同和 あ | print (プリ ンタ )、tv (テレ ビ )、alL (すべ て ) な ど 


な width、device-width、height、max-height、aspect-ratio、 
主 な 螺 体 特 人 orientation、 な ど 


[D 画 語 幅 360px 以 下 の 指定 (link 要 素 の 場合 ) 


<link re に "stylesheet" hre 人 た "css/style.css" media="screen and (max-width: 360px)"> 


[ 選 ] 画 庫 幅 360px 以 下 の 指定 (style 要素 内 の 場合 ) 


<style> 

@media screen and (max-width: 360px) { 
省略 

} 

</style> 


[ じ 基 ] 画 庫 幅 921px 以 上 


SCNR ee Ao Wow Acem con 
[| 画 語 幅 920px ~ 361px 


SCNR な About wens Amos con 


じ 生 画面 幅 360px 以 下 
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CHAPTER 01 














ベー ス に な る HTML を 用 意 し ます 民 還 。 








民 罰 ベー ス に な る HTML 


<body> <div class="container"> 
// ヘッ ダー <div class="content"> 
<div id="header"> <h1>we create stylish design.</h1> 
<imq src="img/logo.png" class="logo"> <p>Lorem Ipsum …</p> 
<ul class="nav"> </div> 
<li>About</li><li>Works</li><li>Access</li><li>Contact</li> </div> 
</ul> </div> 
</div> 省略 
// メイ ン ビ ジュ アル </body> 
<div id="area-visual"> 
( ん 区 還 サイ ズ 変 更に 影響 を 受け な い 共 通 の スタ イル を 指定 
に // ヘッ ダー エリ ア を 中 央 揃え に 。 // メイ ン ビ ジュ アル エリ ア も 中 央 揃え に 。 
次 に 、 レ イア ウト に よっ て サイ ズ 変 更 #header { margin: 0 auto: } // ビジ ュ ア ル は 背景 画像 と し 、 右 揃え に 。 
な ど が な い 共 通 の スタ イル 指定 を 記述 // ロゴ と ナビ ゲー ショ ン は float で 横並び に #area-visual .container { 
し ます 認 鹿 。 し ます 。 margin: 0 auto: 
#header .logo { float: left: } background: url(../img/visualjpg) 
#header .nav { float: right: } no-repeat right top #ffe24d: 


] 

















0 史 記 ] rmin-width で 最小 画面 幅 を 指定 
@media screen and (min-width: 921px) { #area-visual .container { g 

画面 サイ ズ ご と の スタ イル 設定 を 加え #header { width: 888px: 

で by 問 家 宮 。 width: 888px: height: 276px: 

画面 幅 が 921px 以上 (一 最小 画面 幅 が SgDtGOUD が X ] 

921px) の 場合 、min-width で 最小 画 } ーー 1 

面 幅 を 指定 し ます 区 回 。 ・ 


[C 評 画 芋 幅 が 広い と き の ヘ ッ ダ ー と メイ ン ビ ジュ アル 


SCNR producaon srm About 


Works Access Contact 


cc 
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01 | マル チ デ バイ ス に 対応 し た レス ポン シブ な Web ベ 





| | 


| コー 


区 語 min-width で 最小 画面 幅 を 、max-width で 最大 画面 幅 を 指定 





@media screen and (min-width: 361px) and (max-width: 920px) { 














画面 幅 が 920px 361px ( 三 最 大 画面 #header { 
幅 が 920px で 最小 画面 幅 が 360px) の width: 674Px: 
場合 、min-width で 最小 画面 幅 を 、 padding: 0 24px: 
max-width で 最大 画面 幅 を 指定 し ます 3 
TOCB。 #area-visual .container { 
width: 674px: 
height: 276px: 
} 
省略 


[】 画 語 幅 が 中 ぐら い の と き の ヘ ッ ダ ー と メイ ン ビ ジュ アル 


SCNR medacengm About wons Access conac 





人 旋 max-width で 最大 画面 幅 を 指定 


@media screen and (max-width: 360px) { #area-visual { 
画面 幅 が 360px 以下 ( 王 最大 画面 幅 が #header { height: 204px: 
360px) の 場合 、max-width で 最大 画 width: 336px: } 

面 幅 を 指定 し ます 民 記 区 。 padding: 0 12px: #area-visual .container { 
これ で 、 画 面 幅 に よっ て レイ アウ ト が 1 6 EdANNiOT26 
自動 的 に 変更 され る よう に な り ま し た 。 // ナビ ゲー ショ ン が ロゴ の 下 に くる よう に width: 336px: 
変更 し ます 。 height: 204px: 
#header .nav { } 
float: left: 省略 


] ID 


画面 幅 が 小さ いと き の ヘ ッ ダ ー と メイ ン ビ ジュ アル 


SCNTR oscar 


About Works Access Contact 
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CHAPTER 01 





Internet Explorer へ の 対応 


0@ 


閲覧 環境 を 特定 で きる メデ ィ ア クエ リ 
で す が 、IE8 以 下 で は メデ ィ ア タイ プ 
まで し か 対応 し て いま せん 。 

そこ で IE の 場合 に は 、IE 用 の スタ イル 
シー ト を 作成 し 、 コ ン デ ィ シ ョ ナル コ 
メン ト で 読み 込み 対応 し ます 。 


当 軸 に 

|。 。 <|-NfIE の バー ジョ ント > 
| 処理 し た い 内 容 
。 <l[endifl--> 





02 


コン ディ ショ ナル コメ ント の みて 対応 
させ る 場合 は 、IE8 以下 の バー ジョ ン 
で は 固定 レイ アウ ト に し ます 。 過去 の 
IE で 閲覧 され て いる と いう こと は 、 ス 
マー ト フ ォ ン で の 閲覧 を 想定 する 必要 
は あり ませ ん の で 、 実 際 の 運用 上 で 問 
題 に な る こと は な い は ず で す 。 

まず 、 こ こま で 記述 し た 画面 幅 ご と の 
CSS コー ド を ファ イル 単位 に 分 割 し ま 
す (921px 以 上 : large.css、 920px 一 
361px : middle.css、360px 以 下 : 
smalLcss) 民 還 。 

HTML で は コン ディ ショ ナル コメ ント 
を 利用 し 、IE の バー ジョ ン に 応じ て 
link 要素 で 読み 込む CSS を 変更 し ます 
区 記 。 IE7、 8 で は large.css、IE6 で は 
middle.css を 読み 込む こと で 、 過去 の 
IE で は 固定 レイ アウ ト の ペー ジ と し 
て 表示 され ます 。 
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MEM0 


メデ ィ ア タイ プ は メデ ィ ア クエ リ の 前 身 で 、 記 述 方 法 は 同じ で す が 、 指 定 で きる キー ワー 
ド は 媒体 型 だ け で す 。 カ ンマ 区 切り で 複数 指定 で きま す 。 


デバ イス が プリ ンタ また は テレ ビ の 場合 の スタ イル 指定 


<tink rel-'stlesheet" hrei-*stercss media=prin V> 














対応 
より 大 きい (greater than) 全 バ ー ジ ョ ン 
未満 (less than) IE6 の み (6.0 と いう 指定 も 可 ) 
以上 (greater than equabU IE7 未 満 (IE6 以下 ) 


以下 (less than equaU : IE8 以 上 


large.css (middle.css、small.css も 同様 ) 





_echarserurF8h 
SeSG8it 
width: 888Px: 














] Pa #are -content container { 
width:888pxx 。 
} 


#area-content .container .content { 











1 ェ ー に _ padding: 12px012px12px: 
} } 


画面 幅 に 応じ た 設定 ファ イル を 読み 込む 





<F-fftelE8> こ 
_<!-[fgteIE7]> = の 
<ink re に "sbylesheet" href に "css/largercss> 





























<llendif--> 








MEM0 


IE9 で は メデ ィ ア クエ リ に 対応 し て いる 
の で 、 サ ンプ ル は 問題 な く 動作 し ます 。 








U 

また 、IE8 以 下 で も メデ ィ ア クエ リ 
を 利用 で きる よう に する ・「css3- 
mediaqueriesjs」 騙 罰 と いう JavaScript 
ライ ブラ リ が ある の で 、 そ れ を 使用 し 
て 対応 させ る こと も で きま す 。 こ の 場 
合 は 、HTML の head 要素 部 分 を 騙 調 の 
よう に すれ ば 利用 で きま す 。 

た だ し 、 css3-mediaqueries.js は link 
要素 内 の media 属性 を 利用 し た メデ ィ 
アク エリ に は 対応 し て いま せん 。 販 軸 
の よう な 場合 は スタ イル が 正しく 適用 
され な い の で 注意 し まし ょ う 。 


MEM0 ト 


JavaScript ライ プラ リ を 使用 し て 対応 さ 
せる 場合 は 、 ロ ー カ ル 環 境 で は 動作 し な 
い 場 合 が ある 点 、 表 示 速 度 が 遅く な る 可 
能 性 が ある 点 に 注意 し まし ょ う 。 基 本 的 
に は 過去 の IE の バー ジョ ン で 閲覧 され 
て いる 環境 は PC に 限定 で きる こと か ら 
無理 に レス ポン シブ レイ アウ ト に 対応 さ 
せる 必要 は それ ほど あり ませ ん 。( 衣 の よ 
うに 固定 レイ アウ ト に し て 対応 させ た ほ 

う が 軽 快 に 閲覧 で きる な ど 、 ユ ー ザ ー に 
と っ て も メリ ッ ト が 大 きい 場合 も あり ま 
す 。 














まとめ [CoNCLUSION] 


に も つなが り ま す 。 


01 | マル チ デ バイ ス に 対応 し た レス ポン シブ プ な Web ペ ー ジ 









記 避 css3-mediaqueries.jS 


http://code.google.com/p/css3-mediaqueries-js/ 


紅 語 IE の バー ジョ ン に 応じ た 設定 ファ イル を 読み 込む 


<head> 
<link re に "stylesheet" href="css/style.css"> // 全 サ イズ 版 
<!ー-[if Lt IE 9]><script src="http://css3-mediaqueries-js.9ooglecode.com/svn/trunk/ 
css3-mediaqueries.j5"></script><![endi 人 一 -> 

</head> 


床 評 スタ イル が 正しく 適用 され な い 例 


7// HTML 

<head> 
<link re に "stylesheet" href="css/style.css"> // 共通 用 
<lUink re="stylesheet" hre 仁 "css/large.css" media="screen and (min-width: 921px)"> 
<link re に "stylesheet" hre 仁 "css/middle.css" media="screen and (min-width: 361px) and 
(max-width: 920px)"> 
<link re に "stylesheet" href="css/small.css" media="screen and (max-width: 360px)"> 
<! 一 -[if lt IE 9]><script src="http://css3-mediaqueries-js.9ooglecode.com/svn/trunk/ 
css3-mediaqueries.j5"></script><![endi 和 一 -> 

</head> 


スマ ー ト フォ ン で 表現 し た い 内 容 の 差 が 小さ い 

、 メ ディ アク エリ を 利用 する 、 差 が 大 きい 場合 
れ ぞ れ 別 々 の ソー ス 応 す る な ど 、 そ れ ぞ れ の 
- ス で 使い 分 ける 王 夫 を し て みて くだ さい 。 
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4 (の. を コト コピ ルー 


ヒコ ッッ ッッ ルル. ピス 4 ァ 4 






3 カラ ム の リキ ッ ド レイ アウ ト を 実装 する 
に は 、 こ れ ま で は div 要 素 を 入れ 子 に し 、 
float と ネガ ティ プ ブ マー ジン を 組み 合わ せ 
て 実装 する 必要 が あり まし た 。 し か し 、 
flexbox を 使え ば 、float よ り も 柔軟 に 対 
応 で きる よう に な り ま す 。 


制作 ・ 文 山田 敬 美 


制作 の ポイ ント 


表 ftoat レイ アウ ト と の 違い を 理解 する 


ニニ ニニ ニニ T=Ts 朋 リ キッ ドレ イア ウト や 表示 順 の 変更 を 
6 2 プロ パテ ィ ひ と つ で 簡単 に 実装 
ーー 6 上 用 box-sizing な ど 、 ほか の CS553 プロ パ 
ティ と の 組み 合わ せ 


対応 プラ ウザ 





IIE 1( 以上 | | Safari > 以 | 
[Firefex 》 3 以 | | chrome 〉 : 以上 ] 
旧 仕 様 と 現 仕様 の 両方 を 指定 画面 サイ ズ に 応じ た レイ アウ ト に 
flexbox は 2011 年 3 月 に 仕様 が 変更 に な っ た た め 、 旧 仕様 と 現 メデ ィ ア クエ リ と の 組み 合わ せ で 、 画 面 サ イズ に 応じ た レイ ア 
仕様 の 両方 を 指定 し て いま す 。 ウト に する こと が で きま す 。 

#contents 【 / New 7 rie こ = 
/ Old 7 display: -webkit-flexbox: ーー デー ー ビー に 
display: -webkit-box: display: -moz-flexbox: 
display: -moz-box: display: -ms-flexbox: 
display: -ms-box: display: flexbox: 
display: box: } 
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02 | flexbox を 使っ た 柔軟 な ポッ クス レイ アウ ト 





4U の る の ルコ 


U 1 

カラ ム を レイ アウ ト す る た め に 、float 
プロ パテ ィ を 使う 方 法 は 一 般 的 で す が 、 
float し た 要素 の 高 さ が 揃わ な か っ た 
り 、 float を わざ わざ クリ ア す る 必要 が 
ある な ど 、 不 便 に 感じ る こと が 多い の 
で は な いで し ょ うか 。 その 原因 は 、 

float は も と も と 段 組 み を する た め の 
プロ パテ ィ で は な いか ら で す 。 float の 
代わ り に 、CSS3 で 導入 され た flexbox 
を 使え ば 、 こ れ ま で の 悩み が 嘘 の よう 
に 、 簡 単に カラ ム を レイ アウ ト で きる 
よう に な り ま す 回 還 。 














回 還 fioat レ イィ ア ウト と flexbox の 違い 





比較 内 容 float flexbox 
so に 子 要素 の 高 さ は 無視 され る ub 
コン テ ナ と な る 親 要素 の 高 さ (Clearfix で の 対応 は 可能 ) | 子 要素 の 高 さ が 含ま れる 
| それ ぞ れ の ボッ クス が 独立 し た 高 了 
= PP 一 番 高 い ボ ポッ クス に 合わ せ て すべ 
子 要素 の 高 さ が 異な る 場合 に キャ それ ら を 揃え る こと は て の ボッ クス の 高 さ が 揃う 
2 float を クリ ア し な いと 、 後 ろ の | し 
後に 続く 要素 へ の 影響 要素 に 影響 する | 影響 な し 
要素 の 順番 を 変更 | ある 程度 は 可能 だ が 制限 が ある | 自由 に 変更 で きる 


固定 幅 + リ キッ ド な レイ アウ ト | div 要 素 の 複雑 な 入れ 子 と ネガ テ | プロ パテ ィ を 1 行書 くだ け で 対応 


を 組む 


ベー ス と な る HTML と CSS 


ィ プ マー ジン を 駆使 すれ ば 可能 | 可能 








左右 の カラ ム が 固定 幅 で 、 中 央 の カラ 
ム が リキ ッ ド と いう 3 カラ ム の レイ ア 
ウト を 、flexbox を 使っ て 実装 し て いき 
ます 攻 還 。 











[| 完成 例 


MdN Mail し 」 


Il …・ | seisAcae lessz-vee wpe テ 浴 
7 we 















ーー ニー mtEZZTT | 


ーー 
所 
| 


woOrtO 
人 キャン ペー ン 押 人 | 
L 計 1 





ene て rest 59eooe we 
PTN PRE even ーーーー 
en Menauw し eu eoros ws puma フッ クス キャ ナ 
| ue ns WWWe 和 ye 
PT MadN Booe ギ フト 電 の 31Oe 10 2 生 陳 で EPS に 氷 で きる 訂 
Eo き の プ ックス キャ ナ が 奏 。 | 
em ーー PMP 
mamavetem マ フト ee cazuEEea0 が と うい TEST の と ニッ サイ ト 
Tr 5 シル な em っ 
は は 
は TOTS 
ez ] 
| 
は mee マト eoaeoP メー ん BOYae キ フト の) に っ いて Mavieasso | 
トー 
硬 し く ぼ 天 の URL を | 
、 基 sub #extra 
= 
イー maa cavees smo 


ベー ス と な る HTML は 工 還 の よう に シ 
ンプ ル に 記述 し ます 。 順番 は 後 か ら 自 


由 に 変え られ る た め 、 メ イン カラ ム を 
先頭 に 記述 し ます 。CSS で は 、 サ プ ブ カ 
ラム と エキ スト ラ カ ラ ム の 幅 と 、 各 カ 
ラム の 背景 色 を 指定 し ます 了 罰 。 こ の 








詩 点 で は 、 そ れ ぞ れ の カラ ム は 縦 に 並 
ん で いま す 攻 語 。 
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CHAPTER 01 


区 罰 ベー ス の HTML [に 度 】 この 時 点 で は 、 各 カラ ム が 縦 に 並ん で いる 
<div id="contents"> TdN Mol = cm ba 

<div id="main"><!-- メ イン カラ ム --></div> 

<div id="sub"><!-- サ プ カ ラ ム --></div> 

<div id="extra"><!-- エ キス トラ カラ ム --></div> 


<7div> 





民 胃 ベー ス の CSS 





#contents { padding: 10px: 

width: 100%6: background: #edebe6: | 
) ] | 
#main { #extra { 

background: #fff width: 200px: 
} padding: 10px: 
#sub { background: #eee: 

width: 150px: } 











最新 の 仕様 書 で は display: flexbox: と 記載 され て いま す が 、 現 行 の 主要 プラ ウザ は どれ も 


各 カ ラム を 横 に 並べ さ た レイ アウ ト に す まだ 未 実装 で す 。 そ の た め 、 古 い 仕 様 で ある display: box: も 併せ て 指定 し ます 。 な お 、 新 

W 2 9 し い 仕 様 の 動作 確認 を 行い た い 場 合 は 、 現時 点 で は Chrome Canary (正式 版 の Chrome に 
る に は 、 コ ン テ ナ と な る 親 要 素 に 対し 導入 され て いな い 開 発 中 の 機能 が いち 早く 導入 され る ) で 実装 され て いる た め 、 そ ちら で 
て 、display: flexbox: ( 旧 仕 様 で は 確認 が で きま す 。 


display: box:) を 指定 する だ け で す 
区 記 。 親 要素 の 直下 に ある 兄弟 要素 が 計 =ー = 計 語 
横 に 並び 、 そ れ ぞ れ の カラ ム の 高 さ が MEMO 

揃い ます 屋 廊 。 














IE で も IE10 Platform Preview か ら flexbox に 対応 し て いる た め 、「-ms-」 の ペン ダー プレ 
フィ ックス も つけ る 必要 が あり ます (ベン ダー プレ フィ ックス に つい て は 、15 ペ ー ジ の 
INTRODUCTION 「 ブ ラウ ザ と ベン ダー プレ フィ ックス 」 の 項 を 参照 ) 。 

























[し 若 | 親 要素 に display: flexbox: を 指定 し て カラ ム を 横並び に する カラ ム が 横並び に な り 、 高 さ が 揃っ た 状態 と な っ た 
#contents { display: -webkit-flexbox: PdN ol ST em oo ビ 
た 0ld 7 display: -moz-flexbox: 
display: -webkit-box: display: -ms-flexboxi 
display: -moz-box: display: flexbox: 
display: -ms-box: 
display: box: width: 1009: 
/ New 7 } 
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02 | flexbox を 使っ た 柔軟 な ポッ クス レイ アウ ト 





串間 還 メイ ンカ ラム を リキ ッ ド 
ト 9 





: -webkit-ftex(1: 
: -moz-flex(1): 


_Mmant 
た 0ld 7 

-webkit- -box-flex: 則 
_-moz-box-flex: 1: 


-ms-box-flex: 1: 





親 要素 の 幅 に 合わ せ て 、 メ イン カラ ム 

の 横幅 が 変わ る よう に し ます 。 flex0) フ 

ァ ン クシ ョ ン ( 旧 仕 様 で は box-flex プ 
ロ パ ティ ) を 使い 、() の 中 に 入る 数 字 人 EE 四 

を 「1」 と 指定 する こと で 、 親 要素 に ーー _backeround: 痢 作 。 

合わ せ て 幅 を 伸縮 させ る こと が で きま - mm ーー 

す 還 MCE2。 





: -ms-flex(1): 
: flex(1): 




















メイ ンカ ラム の 幅 が 、 親 要素 に 合わ せ て 伸縮 する よう に な っ た 








MEM0 














MdN Mail ご ] ーー ニー ニー 画 

CE コロ に SC つ CO つ OO 000 ーー 
flex0 フ ァ ン クシ ョ ン は 、 そ の 他 の es 。。 <razkoo- eeeo に 
flexbox プ ロバ ティ と は 異な り 、width、 MM Pet = ーー 

6 < 財 er um 

height、margin、padding プロ バ パティ と weon そ フト PT ET 
組み 合わ せ て 使い ます 。 ea 2 な 

ZTT EE ニッ テッ イト 

に は HH 

se 圧入 けけ 

oo ギフ ト 旬 の ( 涼 生生 gono-06ccoo-Goomoeh ocsx っ 

it 

基 

Ar veo 

人 千 や 

Tr 

vmm 

seeaerevetssorcmwces 

em ント eoawom (ezー ん な eowatezaef ッ ト Wom) に っ 

に に 0 てこ KT 

aceTouwe2 ッ ッッ し cceWecEat 

パー エーーー ババ ーー 
et 
se < ここ 











則 $ 表示 順 を 「 サ プー メイ ン … エ キス トラ 」 の 順に 変更 
O 








MdN Mail [=」 ーー 
左 か ら 2 番目 に ある サ プ カ ラム を 、1 番 ee 
目 に 変更 し ます 。 カ ラム の 表示 順 を 変 ーー ーー こ ご ーー ーー 
更 する に は 、flex-order プロ パテ ィ ( 旧 0 ーー 下 時 k 


ET ニー 


eee ギフ トメ いた だ きり ぎ と うこ いま 


仕様 で は box-ordina-group) を 使い 


ます 。 プ ロ パ ティ の 値 に は それ ぞ れ 、 
表示 させ た い 順 番 を 指定 し ます 。 こ こ 
で は 、 1 : サ プ カ ラム 、2 : メイ シカ ラ 
ム 、3 : エキ スト ラ カ ラ ム の 順 で 指定 し 
て いま す 回 司 選 。 








ed 
ag エ の と だ おり です 
の 





mm フト テキ テテ eooooooooo op 
= コテ ーー へ タテ ーー 

LE 

け 和 | 

ar voo 

we 

vo 

CE 

の WWtze 了 の ua を テリ テレ ェ ご 寺 康 くだ さい 


に に fo 
ーー ント 人 モメ ー ん の av eo) = っ いて 
ンー イフ ト あの 主人 ビ メー ト ア に し ス は 生生 
し もこ と で る ます 


講じ < は Eo を クリ ッ ク し て ご 二村 く だ さい 
ーー に ここ ん トー 








ET 
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CHAPTER 01 





レイ アウ ト 


flex-order: N: で 表示 順 を 指定 








ーー 7 が 979 0 
-webkit-box-ordina-group: 2: 
-moz-box-ordinal-group: 2 








に group: 2: 
box-ordinal-group: 2: } 

















り 








、 #extra { 
が od7 














#sub { 





0 





-moz-flex-order: 2: 





-ms-flex-order: 2: 








flex-order: 122 








/old 7 





_-webkit-box-ordinal-group: 1 











-moz-box-ordinal-grouP: 1: 








-ms-box-ordinal-grou 





ox-ordina-group 
_ た New 7 








-webki-box-flex: 1 





-moz-box-flex: 1: 
-ms-botex 
box-flex: 1: 

/ New 7 

width: -webkit-flex(1): 


07 


現時 点 で は 、WebKit 系 プラ ウザ 

(Safari や Chrome な ど ) と Firefox で 、 
flexbox の padding を width に 含め る か 

どう か の 挙動 が 異な り ま す 。 そ の た め 、 
カラ ム に width と padding を 両方 指定 

する と 、 プ ラウ ザ ご と に カラ ム の 幅 が 

異な り ま す 。 この 差異 を な くす た め に 、 
CS53 の box-sizing プロ パテ ィ の 値 を 

border-box に 指定 し て 、 カ ラム の 幅 に 

padding を 含め る よう 調整 し ます 攻 呈 

3。 
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、 -ms-flex-orderi 


-webkit-flex-order: 1: 
moz-ftex-order 1: 








flex-order: 1: 


width: 150px。 。 








、-ms-box-ordinaLgroup: 3 





box-ordinal-group 












flexorder:3: 
width: 200px: 

_ padding:10pxi 

background: #eee: 





width と padding が 指定 され て いる カラ ム に 対し て 、box-sizing: border-box, を 指定 


#sub { 
/* Old 7 
-webkit-box-ordina-group: tb 
-moz-box-ordina-group: 旨 
-ms-box-ordina-group: 虹 
box-ordina-group: 1: 
/ New 7 
-webkit-flex-order:1: 。 
-moz-flex-order: 1: 
-ms-flex-order: HH 了 


flex-order: 1: 





-webkit-box-sizing: border-boxi 


-moz-box-sizing: border-boxi 





#extra{ 
た OMW 0 
-webkit-box-ordina-grou 





-moz-box-ordinal-group: 3: 
-ms-box-ordinal-group: 3: 


-webkit-flex-order: 3: 
-moz-flex-order:3: 


-ms-flex-order: 3: 


flex-order: 3: 






-moz-box- 





Zind: border-boxi 





-ms-box-sizing: border-bo: 


box-sizing: border-boxi 























02 | flexbox を 使っ た 柔軟 な ボッ クス レイ アウ ト 





Chrome( 上 ) と Firefox( 下 ) で サブ プ カ ラム と box-sizing 適用 後 、Chrome( 上 ) と Firefox( 下 ) で 
エキ スト ラ カ ラ ム の 幅 が padding の 分 だ け 異 な る 同じ 幅 に な っ た 











MdN Mail | MdN Mail 




















仙 @ で も 見 や すく な る よう に 調整 し ます 。 広く と れる よう に し ます 。 

間 昌 例 と し て 、 プ ラウ ザ サ イズ が 800px 以 区 過 は エキ スト ラ カ ラ ム が 表示 され 、 
次 に 、 画 面 サ イズ に 応じ て レイ アウ ト 下 の 場 合 は 、 広 告 の ある エキ スト ラ カ 工 哀 は 非 表 示 に な っ て いま す 。 

が 変わ る よう に し て 、 ど の 画面 サイ ズ ラム を 非 表 示 に し て 、 メ イン カラ ム を 








証 画 机 サイ ズ が 1024px の 場合 の 表示 画面 サイ ズ が 800px の 場合 の 表示 

| MdN Mail [ご 」 の 画 | MdNMol 
| em | ロビー コ に ELESCTEE ら 。 ヒビ コ に ココ ヒビ - SS 
委 信 トレ イ MgN Boomarv マイ ポット エン ト 2012OnQ8 1000 信 較 不 業 全 僅 トレ イ を MgN Boorma マイ ホッ ト エ シト リ 20120108 1000 


人 張 み メ ー ル OL Meoowe ギ フト otapvoe ta RB カメ ー ル CT poe キ フト 各 ota0106 1633 





1 人 人 い た し まし た 2oao095 4 の PUB 且 半 ブ ックス キャ ナ Tama Me 人 叶い た し まし た 2o2o105 1422 
MdN Booka ギ フト 香 2 や 00 18 で る mae WaN Booke ギ フト 旬 nzoroe ese | 
Pa の プッ クス キャ テグ し こう | 
eyenmel cm ーーーーー FT MP 
AM Booket 頃 全 す る MY Boots ギ フト あ を ご いた だ き あ り が と うこ ざい ます ニッ チ な 電子 和 天 サイ ト AM may 芝 ロ す る Mooe ギ フト 生ま ご きえ いた だ き あり が と うこ ざい ま 。 
こき 電 は は 下 の と 吉 り で す 。 人 SO この と お り で す 。 
ミッ ク を 硬 せ る 名 で つか 
の ちな い 大 りき じ 電 を も う 
MA Beota そ フト 和 の (0920n6O0O6G0) Lo | 
| 





タレ て ご 二 概 く だ さい 。 の 時 以下 の URL を クリ ッ ク し て ご 和 要 くだ さい 。 





Be 誠 の MgN Boows そ フト 生み) に つい て | ル 区 の MdN Boows ギ フト 季 の か ) に つい て 
MgN Booa ギ フト 甘 の 流 先 [メー ル ア ド レズ は 所 で 知れ ば MgN Boowa ギ フト 聞 の 未完 E メ ー ル アド レス は 。 二 和 放 で 人 内 で あれ ば 
人 し す を こと が で きま す 。 し 主 す る こと が で きま す 。 








主 し く ほ 下記 の URL を 














eee 


















| フラ イバシー ポリ シー 昌和 ヘル プ 才 間 いき わせ Sueva | プラ イバシー ポリ シー 析 過 了 ヘルプ 記 問 い 合わ せ SMeNMm 
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CHAPTER 01 


区 証 画 再 サ イズ が 800px 以 下 の 場合 に は 、 エ キス トラ カラ ム を 非 表 示 に する 





@media screen and (max-width: 800px) { 


画面 サイ ズ に よっ て 異な る スタ イル を 
指定 する に は 、CSS3 の メデ ィ ア クエ 
リ を 使い ます 。 メ ディ アク エリ に は い 
くつ か の 指定 方 法 が あり ます が 、 今 回 
は CSS5 フ ァイル に 記述 する 方 法 を 採 
用 し ます 。@media screen and (max- 
width: 800px) と する こと で 、「 画 面 サ 
イズ が 800px 以 下 の 場 合 に 処理 を す 
る 」 と いう 意味 に な り ま す 欧 語 。 














ライ ブラ リ を 使用 し て IE に 対応 する 





MdN Mail 3 詞 

Tdisplay: flexbox:」 は 現状 どの 主要 プ に そ ココ に そ て うに 
ラウ ザ も 実装 し て いま せん が 、 旧 仕 欄 2 aofore 
の display: box: で あれ ば 、Chrome、 ーー * ーー ニー ーー 
Safari、Firefox で すでに 実装 され て い 5 
ま す 。Internet Explorer で は IE10 SA 人 目 旧 当 
Platform Preview か ら 実 装 さ れ て いま に ーー ニー 
す が 、IE6 か ら IE9 で 実装 する に は 、 
JavaScript を 使っ て 対応 する 必要 が あ 
り ま す 過 記 。 そ の た め 、 今 回 は 「flexie. 
j5」 と いう ライ ブラ リ を 使用 し ます 。 

flexiejs を 読み 込む 前 に 、jQuery を 読み S 

込ん で お く 必 要 が あり ます 。 本 狂 
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#extra { 
display: none: 


紅 語 デフ ォ ル ト 状 態 で の IE9 の 表示 


























使い 方 は 、「Flexie」 の Web サ イト 玉 還 

「 か ら flexie.js (バー ジョ ン 1.0.2) を ダ 

「 ウン ロー ド し 、HTML の head 内 で 読み 

込む だ け で す 罰 語 。 た だ し 、0? で box- 
sizing を 指定 し て いた 場合 、 騙 語 の よ 
うに 下部 に 隙間 が 空く 場合 が あり ます 。 
IE8 で は 同様 に 右側 と 下部 に 隙間 が 空 
き 、IE7 と IE6 は 問題 あり ませ ん で し た 。 
flexie.js を 使用 する 場合 は 、 カ ラム に 
横幅 を 指定 し た ら 、padding は 別 の 要 
素 に 指定 する よう に し て 、box-sizing 
は 使わ な い 方 が 無難 で し ょ う 。 








MEM0 


IE 以外 の プラ ウザ や IE10 以 上 で は 必要 
な いた め 、 条 件 分 岐 コ メン ト を 使っ て 
IE6 か ら IE9 に の み 読 み 込 まれ る よう 指 
定 し ます 。 








まとめ [CONCLUSION] 


flexie.js は flexbox に 未 対 応 の IE と Opera、 両方 に 対応 
店 / 
レイ アウ ト が 再現 で きま し た が 、 


し で てい る よう に 

で は 、IE で は ある 程 
0pera で は 動き ませ ん で し た 
メン ト で IE6 か ら IE9 で の 

上 E の 場合 で も 、flexie.js の 

| た 9 リル は /\/ ン 9 


パー ジョ ン (1.0.3) 
1 つ 前 の バー ジョ ン で 動作 させ 


まだ 不安 定 な 部 分 も ある よう 





四 証 「Flexie」 の Web サ イト (flexie.js) 


http://flexiejs.com/ 


抽 評 head 内 で jQuery と flexie.js を 読み 込む 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jqueryminjs"></script> 
<!--[if (gte IE 6)&(lte IE 9)]><script src="7js/lib/flexie.js"></script><![endif--> 


記 flexie.js を 適用 し た IE9 の 表示 
























iacemy@mdn_mailLcom (ロブ デフ ト ) ] 
MdN Mail F コ 加 
| swc | 返信 | 主 則 人 | 転送 計 下 メール 報告 削 附 | EhW 2 MdN SOHo 公式 サイ ト 
宇宙 最大 流 SOHO オ フィ ス が 期 
| に ら に 定 キ ャ ン ペー ン 全 中 | 人 
| 連 箇 レイ = JAdN Bookmamk マイ ホッ ト エ ント リー 391201008 1000 ur 
| 人 泊 み メー ル MdN Books MdN Books ギ フト 穫 20120106 16:32 ee men tohocom 
| MMdN Booe 導 如 を 先 送 い た し まし た 2012005 1422 EPUB 変 換 ブッ クス キャ ナ 
| せ 欠 初 ! 書 電 を 続 み 取る だ け で 
旧 Cy MdN Books ギ フト 券 2012010e te 世界 を みる だ たけ 
| MGN Books の プッ クス キャ ナ が 登場 
コミ 和 ecamymdn mal com woub scannercom 
MdN Books が 発行 する MdN Books ギ フト 琴 を ご も 文 い た だ き あ り が と う ご ざ いま す 。 ニッ チ な 電子 娠 籍 サイ ト 
| ご 内 は 以下 の と お り で す 。 作っ た ジャ ン ル か ら 本や コミ ッ ク 
| を 押せ る 他 で は 見 つか ら な い 提 
| り 財 し 物 を 探 そう 
*000-000000-000000) ceo 
痢 1 
| Hf: v1000 
| EE 
| 消費 科 : VO 
| 人 he 
| 
ほ 文 の 録 新 杖 名 3 以下 の URL を クリ ッ ク し て ご 確認 < だ さい 。 
Np wwww mdnbooks comaccou 
MdN Books ギ フト 圭 の 送 代 先 の 更 (E メ ー ル 州 式 の MdN Books ギ フト 苦み) について: 
MdN Bools ギ フト 等 の 送信 移 E メ ー ル アト レス は 、 地 全 用 で 者 志向 で あれ ば 
修正 し 再送 する こと が で きま す 。 
Mu く は 下記 の URL を クリック し て ご 確認 だ さい 。 
| hap ww mdnrbooks cemwhetplcustome 2ho9e 
MdN goes 。 ] 
Nep ww mdn books om | 
ブラ イバシー ポリ シー 利用 電 約 ヘル プ お 問 い 合わ せ で MdN Mel 





レイ アウ ト が 崩壊 する こと に な る た め 、 こ れ ら の こと 
を 踏ま える と 、PC 向け の 大 案件 で 利用 する に は ま 
だ リス ク が あり ます 。 

た だ し 、 タ タプ レット や スマ ー ト フォ ン 限 定 、 ま た は PC 
向け で も IE や Opera は 対象 外 と いう 条件 の 場合 に は 、 
flexbox は 本 当 に 便利 な プロ パテ ィ で す 。float で は 実 
現 で き な い よう な 複雑 な レイ アウ ト も 簡単 に 実装 で き 
と の jp 件 の 条件 に よっ て は 今 か ら で も 積極 的 に 使 
っ て いけ る で し ょ 


回 I の レル シル ルク 
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ナビ ゲー ショ ン の 位置 を 
固定 し た Web ページ 





メニ ュー ナビ ゲー ショ ン の 位置 が 固定 さ 
れ た ペー ジ を 作成 し ます 。 ペー ジ を 下 に 
スク ロー ル し て も ヘッ ダー メニ ュー の 位 
置 が 変わ ら な い 、 使 いや すい デザ イン に 
な っ て いま す 。transform プロ パテ ィ な 
ど を 利用 し て 、 メ ニュ ー の ロー ルオ ー バ 
ーー 時 に 動き を つけ まし た 。 


制作 ・ 文 藤本 勝己 (株式 会 社 レ リー フ ) 


制作 の ポイ ント 


過 position: fixed で ヘッ ダー を 固定 する 

時 CSS だ け で ロー ルオ ー バ ー の スム ーー 
ズ な 動き を 実装 

時 transition プロ パテ ィ の 設定 


| IE P ] |Safari >5 胃 | 


[Firefox 


[chreme 16 以上 | 


※IE は transition に 非 対 応 。 

















ヘッ ダー の 高 さ は コン パク ト な サイ ズ に 設計 メニ ュー に ロー ルオ ー バ ー 時 の 動き を つけ る 
ヘッ ダー を 固定 で 表示 し た 場合 に 、 ヘ ッ ダ ー の 高 さ (height) transform プロ パテ ィ と transition プロ パテ ィ を 併用 し て 、 メ 
が あり すぎ る と 、 ウ ィ ン ド ウ の サイ ズ に よっ て は コン テン ツ の ニュ ー を ロー ルオ ー バ ー し た 際 の 動き を 表現 し て いま す 。 


表示 幅 が 狭まり 見 づら く な る た め 、 細 め の 設計 に し て いま す 。 
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ヘッ ダー と 





人 

position: fixed: を 使う と 、 フ レー ム セ 
ッ ト の よう に 画面 の 一 部 を 固定 し て 、 

それ 以外 の 部 分 の み ス クロ ー ル する よ 
うに 作る こと が で きま す 回 還 。 








MEM0 

position: fixed: は IE6 で は 対応 し て いな 
いた め 、 ヘ ッ ダ ー メ ニュ ー と フッ ター の 
位置 を 固定 する こと が で きま せん 。 




















今回 の レイ アウ ト で 指定 し て いる ID 
は 、 柄 還 の よう に な り ま す 。 

固定 し た い header 部 分 に position 
:fixed を 指定 する と 、 ヘ ッ ダ ー を 固定 
する こと が で きま す 。 こ こ で は フッ タ 
ー も 同じ 要領 で 固定 し て いま す 。 
header に 設定 する CSS は 、 芽 軸 の よ 
うに な り ま す 。 








ーー 

















03 | ナビ ゲー ショ ン の 位置 を 固定 し た Web ペ ー ジ 裕 


ッ タ ー を 固定 する 


回 語 ヘッ ダー 部 分 を 固定 する 


| PHOTO COLLECTION 





plam 









MODSUARIGIN *ー #header 


* 一 #wrapper 


ーー #footer 


じ 乙 header に 指定 する CSS 


#header { 
background-color: #AUC9D8: 
color: #fff: 
position: fixed !important: 
position: absolute: 
top: 0: 
left: 0: 
right: 0: 
width: 100%: 
height: 30px: 
font-size: 12px: 
padding-top: 45px: 
padding-left: 30px: 
font-family: "Times New Roman", Times, serif: 
ー 省略 
] 
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CHAPTER 01 


olgHguci に = に ブリ ンー イム モニ エンス 





民 記 transform 関数 








値 | 効果 
transform プロ パテ ィ を 使っ て 、 ヘ ッ rotate(deg) 回 転 (deg で 指定 。 10deg や -10deg な ど ) 
ダー メニ ュー に ロー ルオ ー バ ー し た 時 scalecylx | 拡大 ・ 縮 小 (数 値 を 指定 。1 や 0.5 な ど ) 
の 動き を つけ る 設定 を 行い ます 。 skew(deg) X 軸 、Y 軸 へ の ゆがみ (deg で 指定 。10deg や -10deg な ど ) 
transform プロ パテ ィ に は 、none か ranslateoIxy) | 移動 (px で 指定 。10px な ど ) ニー ニー ニニ ュー 
transform 関数 を 指定 する こと が で き 
ます 。 
transform 関数 を 指定 する と 、 生 成 さ 
れ た ボッ クス を 変形 ・ 移 動 ・ 回 転 させ 
る こと が で きま す 慌 還 。 none は 変形 し 
な い 、 つ まり transform を 無効 に する 
と いう 値 で す 。 


区 玉 ヘッ ダー 部 分 





#header の ナビ ゲー ショ ン を 設定 し て 1MSKOHIKG 中 6J】 由 は SG BEO】| 
いる lii:hover の 情報 に 、transform を 
設定 し ます 。 各 プラ ウザ に 対応 する た 
め の -webkit-、-moz-、-ms-、-o- も 
同じ く 設 定 し ます 区 語 必 3 区 胃 lrhover に transform と 、 各 プラ ウザ へ の 対応 を 指定 する 


#header ulli:hover { 


YegetaPles pimal street 


-webkit-transform:scaleY(1.2) translateY(-3px): 
-moz-transform:scaleY(1.2) translateY(-3px): 
-ms-transform:scaleY(1.2) translateY(-3px): 
-o-transform:scaleY(1.2) translateY(-3px): 
transform:scaleY(1.2) translateY(-3px): 

ー 省 申 

} 


D 誠 #header の ナビ ゲー ショ ン を 設定 


<div id="header"> 
<ul> 
<li id="nav01"><a href="#plant">plant</a></li> 
<li id="nav02"><a href=-"#vegetables">vegetables</a></l> 
<li id="nav03"><a href="#food">food</a></li> 
<li id="nav04"><a href="#animal"> animal</a></i> 
<li id="nav05"><a href="#street">street</a></li> 
ul> 
</div> 
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『 03 | ナビ ゲー ショ ン の 位置 を 固定 し た Web ペー ジ KM 
6 、 ガト の 
y transition で 変化 を 設定 
介 見 時 間 を 指定 ) な ど を 、 ま と め て 指定 す duration だ け を 指定 し 、transition- 
1 ツン る こと が で きま す 四 還 。 delay は 指定 し て いま せん 。 transition- 
transition プロ パテ ィ で は 、transition- 各 値 は 半角 スペ ー ス で 区 切っ て 指定 し delay の 初期 値 は 「0」 の た め 、 
property (変化 させ る 対象 の CSS プロ ます 。 時 間 を 設定 する 値 の うち 最初 に transition に よる 変化 が すぐ に 開始 す 
パテ ィ 名 を 指定 )、transition-duration 指定 され た 値 が transition-duration、2 る 設定 に な っ て いま す 。 
( 値 が 変化 する の に 掛か る 時 間 を 指定 )、 番目 に 設定 され た 値 が transition-delay 
transition-delay( 変 化 が 始ま る まで の の 値 に な り ま す 。 こ こ で は transition- 
選 記 transition プロ バテ ィ の 基本 的 な 記述 
MEM0 ee 
transition プ ロバ パテ ィ に つい て は transition : all 0.3s 
CHAPTER02-02 「 表 示 内 容 を 切り 替え る 言 BN 
タプ ナビ ゲー ショ ン の 実装 、 100 ペ ー ジ 夫 必 に が が る 論 較 
の COLUMN も ご 覧 くだ さい 。 すべ て の プロ パテ ィ を 対象 
八 避 誠 transition の 時 間 を 指定 する 
)( 〇 ) 
#header ul li:hover{ 
今回 の サン プル で は 、 マ ウス オー バー ー 省略 一 
し た 際 に 、 少 し だ け 上 に 動く 設定 に し -webkit-transition:all 0.35: 
て いま す 加 玉 。 -moz-transition: al 0.3s: 
今 まで Flash や gif ア ニメーション で -0-transition: all 0.35: 
作っ て いた よう な 動き を 実現 で きま す ニー 昌 
106-21oe- ぅ 帳 
[0 通常 時 避 評 マウ ス オ ー バ ー 時 
Yegetables vegetables 
まとめ [CONCLUSION] 
コン テン ツ 表 示 エ リア が 縦 に 長い Web サ イト の 場合 、 うだ け で 可能 に な り ま す 。 iMUEII に 1tOguuk コ 
ペッ ダー に ある メニ ュー が 固定 され て いる と 、 ペ ー ジ transition の プロ パテ ィ を 併用 する こと で 、 今 まで に 
の 移動 が し や すく 使い や すい ペー ジ に な り ま す 。 な か っ た 、 一 風 変 わ っ た 動き を 実現 する こと が で きる 
そこ に ちょ っ と し た 動き を 加え る こと も 、CSS3 を 使 よう に な り ま じじ た 。 
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CHAPTER 01 
レイ アウ ト 


ウィ ンド ウサ イズ に 連動 する 
リン スシ ん ノア ルリ ル ピコ あん ァ 





ウィ ンド ウサ イズ に 連動 し て 配置 が 調節 
され る リキ ッ ド タイ プ の 特性 を 残し な が 
ら 、 絶対 配置 を 使っ た フリ ー な レイ アウ 
ト を 実現 し ます 。 ポ イン ト は 座標 の 指定 


TNrORwATiON Wi MI に ML に % を 用 いる こと 。 できるだけ 幅広 い 画 


に 対 こい 場合 に 有効 な 
mn OMMIN【C1 面 サ イズ に 対応 させ た い 場 合 に 有効 な 


の の 〇 1 PJ テク ニッ ク で す 。 


制作 ・ 文 高橋 と し ゆき (Graphic Arts Unit) 


INQUIRY 


いり まり も いい いり い 2 1 sCHEDUrE 


【e い (di 





制作 の ポイ ント 


目 絶 対 配置 の 座標 を % で 指定 する 

用 背景 画像 に グラ デー ショ ン を 重ね て 
奥行 き を 出す 

上 border-radius で ボタ ン を 円 形 に する 


EXIBISHON 





En アル レル アルル 
[EE 。 〉7 以 上 肛 [Safar > 5 以上 ] 
Firefox - 欄 , ] [chrome. ) | 2 | 


※IE は 一 部 の 処理 に 非 対 応 。 








ラン ダム に 配置 し た ボタ ン を リサ イズ に 連動 させ る 円 形 グ ラ デ ー シ ョ ン で 周辺 の 明度 を 落と す 
ナビ ゲー ショ ン ボ タン を ウィ ンド ウ 幅 の 変化 に 連動 させ る こと 中 央 部 分 が 明る く な る よう に グラ デー ショ ン を 重ね る こと で 、 
で 、 レ イア ウト を 多く の 画面 サイ ズ に 対応 させ ます 。 メイ ン の タイ トル を 引き 立た せま す 。 
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まず は Illustrator を 使っ て 右記 の よう 
な タイ トル 画像 を キ 作 り ま す 。 こ の パー 
ツ は 「 フ ァイル 」 メ ニュ ー…「Web お 
よび デバ イス 用 に 保存 .…」 を 選択 し 、 
[プリ セッ ト : PNG-24] で 透過 png と 
し て 書き 出し て お きま し ょ う 回 謙 。 




















| MEM0 m ] 


と で は Mac 0S X 版 の lllustrator 

CS5 と Photoshop CS5 を 使用 し て いま す 

が 、 画 像 を 同じ よう な 状態 で 保存 で きれ 

1 ば 、 ほ か の デザ イン ツー ル や 画像 処理 ソ 
| フト を 使っ て も 問題 あり ませ ん 


続い て Photoshop で 了 罰 の よう な 背景 
の パタ ー ン を 作成 し て JPEG 形 式 で 保 
存 し ます 。 さ ら に 、 こ れ を 蓄 罰 の よう 
に 少し 明る く 補 正 し 、 同 じ く JPEG 形 
式 で 保存 し ます 。 先 に 保存 し た 方 が ペ 
ー ジ 全体 の 背景 画像 、 後 の 方 が ナビ ゲ 
ーション ボタ ン 内 の 背景 画像 で す 。 








人 還 タ イト ル 画 像 


AEUTIST 
MEETTING 


いり 12 


ART EEVETNT in Tokkyo City Forum 


回 衣 [プリ セッ ト : PNG-24] で 書き 出す 





じ 証 背景 の バタ ー ン (ペー ジ 全 体 ) 





Web お よび デバ イス 略 に 人 大 
FPPREPPRKP デ 】 四 
デ | _ キャンセ ル 
は 完了 ア 
「 | フ uwz ト mee 
ee 一 - 縛 oe-u-x 
所] に 

















攻 明 | 背景 の パタ ー ン (ナビ ゲー ショ ン ボ タン 内 ) 
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CHAPTER 01 





続い て HTML の コー ディ ング で す 。 

回 呈 の よう に 、 タ イト ル h1 要素 、 ナ ビ 
ゲー ショ ン を ul 要素 で マー クア ッ プ 
し ます 。 タ イト ル と ナビ ゲー ショ ン は 、 
「content」 と いう id の div 要 素 で 囲ん 
で お きま す 。 ま た 、ul 要 素 に は 「nav』 
と いう id を 付加 し まし た 。 

















U& 

続い て CS5 の コー ディ ング に 移り ま 
す が 、 そ の 前 に IE6、7、8 の み CSS セ 
レク タ を 拡張 する スク リプ ト を 読み 込 
む た め 、HTML の head 要素 に 区 還 の コ 
ー ド を 追記 し ます 。 

「selectivizrjs」 芽 調 は IE8 以前 で サポ 
ー ト され て いな い CSS セ レク タ を 使 
える よう に する も の で す 。 jQuery や 
MooTools 工 買 な どの JavaScript ラ イ 
ブラリ と 合わ せ て 使い ます 。 今回 は 
MooTools を 利用 し まし た 。 





続い て 「style.css」 と いう 空 の テキ ス 
ト フ ァイル を 作成 し 、HTML の head 要 
素 に 工 廊 の 1 行 を 追記 し て 読み 込み ま 
す 。 こ の ファ イル は 、 必 ず 先 ほど 追記 
し た IE 用 の 記述 より あと に 記述 し ま 
し ょ う 。 
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工 還 ベー ス と な る HTML 


<!DOCTYPE htmL PUBLIC "-//W3C//DTD XHTML 1.0 TransitionaU/EN" "http://www.w3.org/ 
TR/xhtmU/DTD/xhtml1-transitionaLdtd"> 
省略 
<body> 
<div id="content"> 
<h1><img src="images/logo.png' width="300" height="230" alt="ARTIST MEETING 2012" 
/></h1> 
<ul id="nav"> 
<li><a href="info.htmU">INFORMATION</a></li> 
省略 
<li><a href="inquiry.htmU">INQUIRY</a></ll> 
</u> 
</div> 
</body> 
<htm> 


head で JavaScript ラ ウ > 
HTML の K Script ラ イブ ラリ を 読み 込む 


<!--[if (gte IE の)&(Ute IE 8)]> 
<script type="text/javascript" src="js/mootools-core-1.4.2-full-nocompatjs"></script> 
<script type="text/javascript" src="js/selectivizrjs"></script> 

<![endif--> 


selectivizrjs MooTools 


http://selectivizr.com/ http://mootools.net/ 











MEM0 


「selectivizrjs」 は 、 組み 合わ せ て 使う JavaScript ラ イブ ラリ に よっ て 、 サポ ー ト する セレ 
クタ が 異な り ま す 。 今回 使う MooTools と の 組み 合わ せ は 、jQuery と 組み 合わ せる より も 
多く の セレ クタ を 利用 で きま す 。 




















式 過 HTML の head で CS5S フ ァイル を 読み 込む 


<Uink hre に "css/style.css" re に "stylesheet" type="text/css" /> 











区 証 全体 に 関わ る スタ イル (style.css) 


@charset "UTF-8": a{ 
「style.css」 に 了 還 を 入力 し ます 。 こ text-decoration: none: 
れ は 全体 に 関わ る スタ イル で す 。 /* 各 要素 の 初期 設定 ツ / outline: 0: 
まず 「/* 各 要素 の 初期 設定 */」 以 下 は 、 body, h1. div. ul ti. a { F 
各 要素 の スタ イル を 初期 化す る た め の 99 
処理 で す 。 そ し て 「/* 全 体 の 背景 バタ ei ーー 
ody 
ーー ツン * ヽ - ーー 攻 引 画 
ン ツ 」 以下 で 、 ベ ペー ジ 全体 の 背景 画 uit background: url(../images/background01. 
レー っ 
像 を 指定 し ます 。 list-style: none: jpg) repeat center center fixed: 
背景 画像 の 配置 が 「fixed」 に な っ て い ] ] 


月 
る の は 、 ナ ビ ゲ ー シ ョ ン ボ タン の 背景 
画像 と 位置 を 合わ せる た め の 処 理 で す 。 


IE は fixed の 解釈 が 異な る た め 、body の 背景 画像 と ナビ ゲー ショ ン ボ タン の 背景 画像 の 位 
置 を 合わ せる こと が で きま せん 。 


コン テン ツ を 内 包 す る 要素 の スタ イル を 1f 





攻 訓 コン テン ツ を 内 包 す る 要素 の スタ イル (style.css) 
/ パ コン テン ツ を 内 包 す る 要素 / 


続い て 了 枢 罰 の スタ イル を 追記 し ます 。 #content { 

これ は 、 コ ン テ ン ツ の 全体 を 内 包 5 す る position: absolute: 
「#content」 の スタ イル で す 。width、 width: 100%: 
height と も に 100% な の で 、 ペ ー ジ 全 height: 1007%: 


体 を 覆う よう に 配置 され ます 。 さ ら に 、 2 


『 景 は 中 央 部 分 が 透明 に な る グラ デー 
ショ ン を 指定 し ます 。 こ うす る こと で 、 


min-height: 680px: 
background: -webkit-radial-gradient(center, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%): 








省 申 

ペー ジ の 周辺 が 暗く な り 、 中 央 に スポ background: radia-gradient(center, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%): 
ッ ト ラ イト が 当たっ て いる よう な 演出 } 
が で きま す 区 記 可 3。 
また 、 プ ラウ ザ の サイ ズ が 小さ く な っ 
た と き 要 素 同士 が 重 な ら な いよ う 、6、 上 E は グラ デー ショ ン に 対応 し て いな い の で 、 通 常 の バタ ー ン の み と な り ま す 。 
7 行 目 の min-width と min-height で 最 
大 幅 、 最 小幅 を 決め て いま す 。 

区 愛 ]】 背景 は 中 央 部 分 が 透明 に な る グラ デー ショ ン と する 区 護 | 中 央 に スポ ッ ト ラ イト が 当たっ て いる よう な 演出 





_ に ョ 
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CHAPTER 01 





タイ トル の スタ イル を 作成 する 


区 鹿 ロゴ (タイ トル ) に 関す る スタ イル (style.css) 


さら に 民 還 の スタ イル を 追記 し ます 。 
left と top を 50% に 設定 し 、 ロ ゴ の サ 
イズ の 半分 を ネガ ティ プ マ ー ジ ン と し 
て 指定 する こと で 、 ロ ゴ が 常に 
「#content」 の 中 央 に 表示 され る よう 
に な り ま す 藍 本 3。 





民 詞 ロゴ の 配置 


/ た タイ トル */ 
#content h1 { 
position: absolute: 
top: 5096: 
left: 50%: 


width: 300pxj 

height: 230px: 

margin: -115px 0 0 -150px: 
} 


世評 ロゴ が 中 央 に 表示 され る 


top:50%, left:509% 


ニー レル ニレ | 


次 は ナビ ゲー ショ ン ボ タン の 共通 スタ 
イル と な る 契 罰 を 追記 し ます 。 ナ ビ ゲ 
ーション ボタ ン は Ii 要素 内 の a 要 素 を 


区 記 ナビ ゲー ショ ン ボ タン の 共通 スタ イル (前 半 /style.css) 


/ パ ナビ ゲー ショ ン ボ タン 共通 スタ イル */ 
#navlia{ 

position: absolute: 

display: block: 

width: 170px: 

height: 95px: 

padding-top: 75px: 


background: url(../images/background02.jpg) repeat center center fixed: 


プ ブロック 要 素 と し て 扱い 、 absolute の 
絶対 配置 で レイ アウ ト し て いき ます 。 
ここ で は a 要 素 の 扱い や サイ ズ 、 フ ォ 
ント 、 背 景 画 像 な ど を 指定 し ます 。 
区 胃 の よう に 、 ボ ックス の 実際 の 高 さ 


font-family: Georgia, "Times New Roman", Times, serif: 


font-size: 18pxi 

color: #ff: 

text-align: center: 
省略 (で 解説 ) 
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9 MI に JE 
UTMN【G: 


る 〇 1 





が 上 部 padding と height の 合計 に な る 
こと に 注意 し まし ょ う 。 ま た 、 背 景 画 
像 (background) は body の 背景 と 同 
じ よ うに 「fixed」 を 指定 し 、 位置 が 常 
こ 育 景 と 揃う よう に し ます 。 


に 背景 


じ 評 | ボ ックス の 実際 の 高 さ が 上 部 padding と height の 合計 に な る 








由 還 ナビ ゲー ショ ン ボ タン の 共通 スタ イル (後半 /style.css) 


01 /* ナ ビ ゲ ー シ ョ ン ボ タン 共通 スタ イル */ 


























続い て 工 罰 で は 、 ボ ックス 自体 の シャ 02 #navlia{ 
ドウ 、 テ キス ト の シャ ドウ を 設定 し ま 03 省略 ( 
す 。 box-shadow で は inset を 指定 し て 04 

内 側 に シャ ドウ を 施し て いま す 皿 。 8 守 失 上 
1 13 行 目 は 、 ポ ックス を 円 形 に す 














る た め の 処 理 で す 。 円形 の ポッ クス を 宙 Fe 
作る に は 、 こ の よう に border-radius p9 
こ 50% を 指定 し ます 。 角 丸 の 半 径 が 10 



































で 解説 ) 
-webkit-box-shadow: inset 3px 3px 10px rgba(0. 0, 0, 0.5): 


06 box-shadow: inset 3px 3px 10px rgba(0. 0, 0 ,0.5): 
07 -webkit-text-shadow: 0 0 5px rgba(0, 0, 0, 1): 


text-shadow: 0 0 5px rgba(0, 0, 0, 1): 
border: 5px solid ##6c7376: 


behavior: url(../css/PIE.htc): /* 動 作 さ せる に は 絶対 バス に 修正 する */ 


ボッ クス の 幅 、 高 さ の 半分 の 値 に な り 、 11 -webkit-border-radius: 50%: 
自動 的 に ポ ボッ クス を 円 形 に する こと が 12 省略 

可能 で す 騙 放 。 14 行 目 は 、IE で border- 13 border-radius: 50%: 
radius を 有効 に する た め 「PIE.htc 


四 を 読み 込ん で いま す 。 こ れ で 基本 上 


の スタ イル は 設定 完了 で す 。 


MEM0 | 


PIE.htc は 、IE が サポ ー ト し て いな い CSS3 プロ バテ ィ の 一 部 を IE に も | 
対応 させ る た め の ビ ヘイ ビア で す 。 こ の ファ イル を CSS か ら 読 み 込 
むこ と で 「border-radius」、「box-shadow」、「linear-gradient」 の プ 
ロ パ ティ を IE で も 利用 で きま す 。 使 用 の 際 は 、 ベ ンダ ー プ レフ ィ ッ ク 
ス と し て 「-pie-」 を 付加 し た 上 で 、 通常 の プロ パテ ィ と 同じ 要領 で 指 
定 し ます 。 


紙面 で は PIE.htc を 相対 パス で 指定 し て いま す が 、 実 際 に は http か ら 
始ま る 絶対 パス で 指定 する 必要 が あり ます 。 な お 、PIE.htc は inset の 
シャ ドウ に 対応 し て いな いた め 、IE で は シャ ドウ が 表示 され ませ ん 。 





上 屋 】 ボッ クス 型 の シャ ドウ 四国 ボッ クス を 円 形 に し た 


IIO6 い 30 た Y0(6 い | 


INFORMATION 


代 庵 PIE.htc 
http://css3pie.com/ 





続い て 功 還 を 追記 し ます 。 こ れ ら は 、 
ナビ ゲー ショ ン ボ タン ご と に 適用 する 
個別 スタ イル で す 。HTML 側 の 1 要素 
に 個別 の class 名 を 付け て も いい の で 
す が 、 今 回 は HTML を で きる だ け シ ン 


























ロ 





プル に する た め :nth-child 擬 似 ク ラス 
を 使っ て 要素 を 選択 し ます 。:nth-child 
に 続く () 内 に 任意 の 数 字 を 入れ る こと 
で 、 そ の 順番 の 要素 を 選択 で きま す 
2。 

今回 は 6 個 の li 要 素 が ある の で 、1 か ら 


層 2 


6 まで それ ぞ れ の 座標 を % で 指定 し て 





ロ 











眉 記 ナビ ゲー ショ ン ボ タン の 個別 スタ イル (style.css) 


/ な ナビ ゲー ショ ン ボ タン 個別 スタ イル 
#nav li:nth-child(1) a { 
top: 2196: 
left: 696: 
} 
#nav li:nth-child(2) a { 
bottom: 119%: 
left: 1496, 
は 


#nav Ui:nth-child(3) a { 
bottom: 396: 
right: 36%: 

} 

#nav li:nth-child(4) a { 
bottom: 21%6: 
right: 6%: 

} 

#nav li:nth-child(5) a { 


いま す 。 

IE8 以 前 は 本 来 こ の 擬似 クラ ス を サポ 
ー ト し て いま せん が 、「selectivizr」 を 
使っ て 対応 させ て いま す 。 

ブラ ウザ で 表示 させ る と 、 誕 語 の よう 
に な り ま す 。 


top: 1196: 
right: 14%: 
} 
#nav li:nth-child(6) a { 
top: 3%: 
left: 36%: 
} 
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CHAPTER 01 


細 語 .nth-child 擬 似 ク ラス に よる 要素 選択 





<ul> 
<li>list-1</ll> eee nth-child[1 
<li>list-2<7ll> ee nth-child[2 
<li>list-3</li> ee nth-child[3 
<li>list-4</ll> em nth-child[4 
<li>list-5</li> …・ nth-child【5 

</ul> 

MEMO 





selectivizrjs は 、IE が サポ ー ト し て いな い 擬 似 ク ラス 
や 擬似 要素 、 属 性 セレ クタ な ど を IE で も 使用 可能 に す 
る JavaScript プ ラグ イン で す 。 基 本 的 に 「jQuery」 や 
「Prototype」「MooTools」 な どの JavaScript ラ イブ ラ 
リ と 組み 合わ せ て 使い ます が 、 組 み 合 わせ る ライ ブラ 
リ に よっ て サポ ー ト され る クラ ス 、 要 素 、 セ レク タ が 
異な る の で 注意 が 必要 で す 。 今回 の よう に 
「MooTools」 と 組み 合わ せ た 場 合 は すべ て を 使う こと 
が で きま す 。 









TIPS 





回 度 】 プラ ウザ で 表示 させ た と ころ 


TNQUIRY 


ACCESS 


TNFORMATION 


ARTIST 
Wo1oMNN【) 


12 


2 


ART EVRNT in Tokkyo City Porm 


SCHEDULE 


CONCEPT 


EXTBISHON 





rselectivizr」 は ロー カル で は 動作 し な いこ と が ある の で 、 サーバ ー に アッ プロ ー 
ド し て か ら の 確認 が 必要 で す 。 ま た 、 外 部 CSS し か 認識 し な いた め 、 埋 め 込み や 
イン ライ ン で の 記述 で は 動作 し ませ ん 。 


:nth-child(odd) と 記述 する と 奇数 番目 の 要素 の み 、 :nth-child(even) と 記述 する と 偶数 番目 の 要素 の み を 選択 する こと も で きま す 。 これ を table 
の tr 要素 に 指定 すれ ば 、1 行 お き に 色 を 変え る な どの 処理 も 可能 で す (222 ペ ー ジ の CHAPTER04-03「 擬 似 ク ラス を 利用 し た 可読性 の 高い テー 
プル 」 も 参照 )。 ま た 、 数 字 に 続い て 「n」 を 付加 すれ ば 、 指 定 し た 数 字 ご と の 要素 を 選択 で きる な ど 、 さ ま ざ ま な 使い 方 が で きま す 。 


絶対 配置 の 座標 を % で 指定 する と 、 親 
要素 の 幅 、 高 さ に 対し て の 相対 値 と し 





て 配置 で きま す 。 た と えば 、left に 20 
% を 指定 し た 場合 、 親 要素 の 幅 が 500 


ピク セル の と き は 左 か ら 100 ピ クセ ル 、 
親 要素 の 幅 が 1000 ピ クセ ル の と き は 
左 か ら 200 ピ クセ ル に 配置 され る と い 
うこ と で す 太 還 。 こ の サン プル で は こ 
れ を 利用 し て 、 ウ ィ ン ド ウサ イズ に 応 
じ た リ キッ ドレ イア ウト を 実現 し て い 
ます 。 




















MEM0 


水平 方 向 の 座標 は 、 親 要素 の 左 を 基準 と し た いと き は left、 右 を 基準 
と し た いと き は right で 指定 し ます 。 垂 直方 向 の 座標 は 、 親 要素 の 上 
を 基準 と し た い 場 合 は top、 下 を 基準 と し た い 場 合 は bottom で 指定 し 
ます 。 
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04 | ウィ ンド ウサ イズ に 連動 する リキ ッ ド タイ プ の フリ ー レ イア ウト ARTrgT 


信 EETING 


う ) 改 記 ロー ルオ ー バ ー 時 の スタ イル (style.css) 





- / ナ ビ ゲ ー シ ョ ン ポ ボタ ンロール オーバ ー*/ 
最後 に 駐 罰 を 追記 し ます 。 こ れ は ボタ #nav li:nth-child(1) a:hover 
ン に ロー ルオ ー バ ー し た 際 の スタ イル color: # 作 0: 
で す 。 各 要素 と も 、 野 線 と テキ スト の border-color: 角 f0: 
色 が 変化 する よう に 設定 し まし た 語 。 

#nav li:nth-child(2) a:hover 
color: #f06: 
border-color: 者 06: 

} 

#nav li:nth-child(3) a:hover 
color: #39f: 
border-color: #39f: 

} 

#nav li:nth-child(4) a:hover { 
Color: 草 66c: 
border-color: #66c: 

} 

#nav li:nth-child(5) a:hover { 
color: #9c0: 
border-color: #9c0: 

} 

#nav li:nth-child(6) a:hover { 
Color: # 和 0: 
border-color: #f90: 

} 





研 衣 ロー ルオ ー バ ー 時 に 皿 線 と テキ スト の 色 が 変化 する 


いり た 9(0) い | 


まとめ [coNcLUsION] 


absolute で の 絶対 配置 を 使え ば 要素 を 正確 な 位置 ヘレ リサ イズ に 追従 する リキ ッ ド レイ アウ ト の 長所 を 取り 
イア ウト で きま す が 、 想 定 す る ウィ ンド ウサ イズ 以外 入れ る こと が で きま す 。 目的 や 用 途 を 考え な が ら 、 可 
で は 要素 が 隠れ た り リス ペー ス が 空き すぎ る こと が あり 能 で あれ ば 積極 的 に 活用 し まし ょ う 。 
ます 。 し か し 、 今 回 の よう に 座標 指定 に % を 使え ば 、 





CHAPTER 01 
レイ アウ ト 


邊 り グリ ッ ド レイ アウ ト で 実現 する 
レス ポン シブ な サイ ト 





プラ グイ ン を 利用 し て 、 レ スポ ン シ プ ブ 
Web デ ザイ ン に も 対応 し た 、 グ リッ ドレ 
SM Sampletext Sampletext Sametext 0 samplete. nr samplete イア ウト を 簡単 に 作る 方 法 を 説明 し ます 。 
CSS3 を 使う こと で 、 より 簡単 に 複数 の ボ 


居 ックス を 使っ た デザ イン を 作る こと が で 
きま す 。 


制作 ・ 文 / 藤 本 勝己 (株 式 会 社 レ リー フ ) 


CN 


過 グ リッ ドレ イア ウト を 簡単 に 実装 
下 複雑 に な り が ちな 角 丸 を border- 


gw radius で シン プル な コー ド に する 
骨 長 い URL の 表示 な ど を 、word-wrap 


で 問題 回 避 





IIE 以上 | |Safari 


| Firefox 以上 Chrome >16 以 」 


※IE7 一 8 は border-radius に 非 対 応 。 





























ボッ クス の 横幅 を 揃え る 長い テキ スト は 省略 し て 表示 

プラ グイ ン を 利用 する ドレ イ ト を 使っ た サイ text-overflow プロ パテ ィ を 利 ) ら 

こと で 、 各 ボッ クス の 幅 を オバ ー フ ロー し た 際 に は 自動 的 に 略し 、 省 略記 号 を 表示 す 
Boo 


Bowoz 
高 さ を 揃え な く て も 自 Serietaxt sarmietex sarmpletd sarmoletx sa samoigtextsamt る よう 設定 し て いま す 。 


動 的 に 積み 重なっ た レ 


イア ウト を 作る こと が に 2 夜 
で きま す 。 横幅 は ボッ Box01 
クス ご と の 幅 を 揃え て sampletext sampletext sampletext sampletext S..… 


いか な いと 、 隙 間 が で 
き て し まう 点 に 注意 し 
まし ょ う 。 
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グリ ッ ド レイ アウ ト の 準備 


M] 

まず 、 横 幅 、 縦 幅 を コン テン ツ の 内 容 

ご と に 決め て いき ます 。3 列 に な っ た 
合 、4 列 に な っ た 場合 は どう な る だ 

ろう 、 と 想定 し な が ら 決 め る 必要 が あ 

り ま す 。 

グリ ッ ド レイ アウ ト の 設計 を 決め る 際 

は 、 URL 回 還 か ら ア クセ ス し た 図 回 語 

を 参考 に し な が ら 考 える と わか りや す 

いで す 。 


次 に 、」Query」 ほ 還 と jQuery プラ グ 
イン 呈 Query Masonry」 を 入手 し ます 。 
jQuery Masonry は 、 雑誌 の よう な 段 組 
レイ アウ ト を 簡単 に 作成 する こと が で 
きる JavaScript で す 。 

Masonry は 、 工 調 の URL に アク セス し 、 
「Download the script jquery.masonry. 
min.js」 と 書か れ た リン ク を クリ ッ ク 
し て 、 ダ ウン ロー ド を 行い ます 工 軸 。 
ダウ ン ロ ー ド が 済ん だ ら 、 jQuery 本体 
と 同じ フォ ル ダ な ど に 置い て お きま し 
よう 。 


[ 記 「Web デザ イン レシ ピ 」940px グ リッ ド シ ス テム の サン プル 


http://webdesignrecipes.com/940grid.html 


グリ ッ ド シス テム の 参考 図 








940px グリ ッ ド シス テム サン ブル 
12 カラ ム @60px , 20px マー ジン 





回 司 juery 
http://jquery.com/ 


尼 廊 Masonry プ ラグ イン の 公式 サイ ト 
http://masonry.desandro.com/ 
匠 評 「Downoad the script jquery.masonry.min.js』。 を クリ ッ ク し て ダウ ン ロ ー ド 





Download the 
SCript jquery. 


Download this 


project 


Masonry on 3 
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<body> て </body> タ グ の 間 に 、 避 記 
の よう に スク リプ ト を 記述 し ます 。 こ 


区 還 Masonry メ ソ ッ ド を 呼び 出す スク リプ ト 


<Script src="j5/jquery-1.7.1.min.js"></script> 


<Script src="j5/jquery.masonry.minj5"></script> 


<Script> 
$(function0{ 
Var $container = $('#container'): 
$containermasonry({ 
itemSelector: '.item', 
columnWidth: 240, 
isAnimated: !Modernizrcsstransitions 
): 


の スク リプ ト は 「jqueryjs」 と 「jquery 
masonryminjs」 を 読み 込み 、masonry 
メソ ッ ド を 呼び 出す も の で す 。 

その ほか 利用 で きる プロ パテ ィ な ど は 、 


2 で 紹介 し た jQuery Masonry の サイ 
ト で 詳し く 説明 され て いま す 。 


// dynamically load sites using Masonry from Zootool 


$.getJSO0N(http://zootoolLcom/api/users/ 


items/?username=desandro'+ 
'&apikey=8b604e5d4841c2cd976241dd90d319d7'+ 
'&tag=bestofmasonry&callback=?) 


-error( ajaxError ) 


-success(function( data ){ 


): 
): 


</script> 


水色 の ボッ クス で 設定 し た CSS は 
牙 還 の よう に な り ま す 。 

class を それ ぞ れ 個別 に 設定 する こと 
で 、 横 幅 を 変え る こと も で きま す 。 





legalelll に 気 く 
0 人 


各 ボ ックス を border-radius を 使っ て 
角 丸 に 設定 し ます 。border-radius プ 
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水色 の ボッ クス で 設定 し た CSS 


-homepage .item { 


font-weight: 300: 





width: 200px: 省略 

float: left: background-color: #CCCCCC: 
padding: 10px: } 

margin: 10px: 

MEM0 


意 し て くだ さい 男 。 


国 a 属 性 に 共通 で width を 指定 


-homepage .link a{ 
display: block: 
padding: 15px: 
width: 190px: 
background: #BEDAE4: 
Color: #FFFFFF: 





ポッ クス の width を 個別 に 変更 する 場合 、a 属 性 に 共通 で width を 指定 し て いま す の で 、 注 


/* 角 丸 */ 
-webkit-border-radius: 5px 
-moz-border-radius: 5pxi 
border-radius: 10px: 





バッ クス の 角 を 丸く する 


ロ パ ティ は 、4 つ の border- * -radius 
を 一 括 で 指定 する こと が で きま す 四 証 。 
この サン プル で は 、 功 畔 の よう に 
border-radius に 値 を 1 つ だ け 指 定 し 


て いま す 。 この 場合 は 、4 つ の 角 に 同 
じ 値 が 適用 され ます 。 

















[市 border-radius の 基本 的 な 記述 


border-radius : 5px 10px 20% 30px: 


左上 角 丸 の 半 算 | 左下 角 丸 の 半径 
右上 角 丸 の 半径 


眉 届 border-radius の 記述 
-homepage .item { 
省略 
-webkit-border-radius: 5Px: 
-moz-border-radius: 5Dx: 
border-radius: 5px: 
省略 


IE7 て 8 は border-radius に 対応 し て 
いな いた め 、IE7 や IE8 で 表示 し た 場合 
に は 角 が 四角 く な り ま す が 、 ア クセ シ 
ビリ ティ は 確保 で きま す 。 
i05 の Safari で は 、 説 頭 辞 と し て 
-webkit- が 必要 で す の で 、 表 示 を 求め 
られ る 場合 に は 、 併 記す る 必要 が あり 
ます 。 

Firefox 2.0 で は 、 背 景 画像 を 表示 させ 
て いる ボッ クス の 角 は 丸く て な り ま せん 
回 品 。 





に ーー トー 


05 | グリ ッ ド レイ アウ ト で 実現 する レス ポン シ プ な サイ ト = 
tt 
Tl 
し Sp 


ー TIPS で コ 


border-radius の 8 つの 値 を 変え る こと で 、 四 方 の 角 
丸 の サ イズ を 個別 に 設定 で きま す 1。 


右 下 角 丸 の 半径 : 四方 の サイ ズ を それ ぞ れ 指定 する 
⑤ ⑥) 

0) ② 

④ ③ 
⑧ ⑦ 


①⑤ @ ⑧③ @ 
border-radius: 10px 20px 30px 40px / 
15px 25px 35px 45px 
⑤ @⑥ ⑦ @ 


区 記 Firefox 2.0 で の 表示 








Word-wrap プロ パテ ィ は 、 文 字数 が 多 
い 英 単語 や URL が 1 行 に 収まり 切ら な 
い 場 合 、 文 字 列 の 途中 で 改行 する か ど 
うか を 指定 する プロ パテ ィ で す 。 
値 に は normal、break-word の 2 つの 
キー ワー ド の うち 、 い ずれ か を 指定 す 
る こと が で き 、 こ れ に より URL や 文字 
列 が 多い 単語 の 扱い を 決め る こと が で 
きま す 加 呈 。 





word-wrap の 基本 的 な 記述 


word-wrap: break-word: 


拓 キー ワー ド の 指定 
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0@ 


CSS の 記述 は 、 工 還 の よう に 書き ます 。 
word-wrap:break-word を 指定 する と 、 
革 胃 の よう に 英文 の 途中 で スペ ー ス が 
入っ た 場合 で も 、 文 章 を 折り 返す こと 
が で きま す 。 


word-wrap が 何 も 指 定 さ れ て いな けれ 
ば 、 還 の よう に 文字 が は み 出 し て 表 
示さ れ ま す 。 


text-overflow を 設定 


工 証 word-wrap の 記述 


文章 が 折り 返さ れ て いる 


-homepage .link 
padding: 0: 
/* 長い 英 単語 を 強制 的 に 折り 返す 7 
word-wrap: break-word : 
-moz-Word-wrap: break-word : 


} 








MEM0 人 


word-wrap:normal と 指定 し た 場合 は 、 | 
折り 返し な し の 設定 に な り ま す 。 





区 語文 字 が ポッ クス か ら は み 出 て し まう 


いう “ も 


Sampletextsampletextsampletextsampletextsampletext 





text-overftlow プロ パテ ィ を 使う と 、 テ 
キス ト が 表示 領域 を オー バー フロ ー し 
た 際 に 、 省 略記 号 ("…") を 表示 する 設 
定 が で きま す 訪 還 。 

オー バー フロ ー を 強制 的 に 発生 させ て 
省略 記号 を 表示 する に は 、 要 素 に いく 
つか の 追加 の プロ パテ ィ を 指定 する 必 
要 が あり ます 。 以 下 の 例 を 参照 し て く 
だ さい 。 
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引 語 text-overftow の 基本 的 な 記述 


text-overflow: ellipsis: 


し 「…」 を 表示 


TIPS 
ellipsis 切り 取ら れ た テキ スト の 代わ り に 、 省 略記 号 「…」 を 表示 し ます 。 
clip デフ ォ ル ト の 値 で す 。 オ ー バ ー フ ロー し た テキ スト を 切り 取り ます 。 








実際 に 使用 し た の が 太 還 に な り ま す 。 
ボッ クス の 高 さ が 決ま っ て お り 、 長 い 
テキ スト を 表示 し きれ な い 場 合 、 text- 
overflow を 使う と 便利 で す 。 


| の ) 





ーー 


スタ イル シー ト と HTML の 記述 は 
殿 還 、 本 朗 の よう に な り ま す 。 





慌 廊 スタ イル シー ト の 記述 


-homepage .big-textt 
height:50px: 
/* 表 示し きれ な い テ キス ト を .… で 表示 させ る */ 
text-overflow:ellipsis: 
white-space:nowraP: 
-o-text-overflow:ellipsis: 
overflow:hidden: 


HTML の 記述 


<div class="item big-text col2">Box01<br /> 
sampletext sampletext sampletext sampletext sampletext sampletext sampletext 
sampletext sampletext 


</div> 





MEM0 


text-overftow だ け で は 全 プ ラウ ザ に 対応 で き 
ませ ん 。 園 の よう に 設定 し て いま す 。 





【 骸 text-overflow と 合わ せ て 設定 


text-overflow: ellipsis: /* IE, WebKit (Safari, Chrome), Firefox 7, 0pera 11 7 
white-space: noWraP: 
/* Opera 9-10 7 


/* "overftow" の 値 は "visible" 以外 の も の を 指定 する */ 


-o-text-overflow: ellipsis: 
overflow: hidden: 





まとめ [CONCLUSION] 


グリ ッ ド レイ アウ ト は 難 
と CSS3 を 使用 する 
と が で きま す 。 


た だ し 、IE で は まだ サポ ー ト され て いな い プ 日 パテ ィ 
も 注意 し て く 


も 多い の で 、 使 う 際 に は IE で の 見 え 





だ さい 
慣れ て くれ ば 、jQuery を 自分 で タマ イズ し た り 、 
ボッ クス の 装 餅 な ど で オ リ ジ ナ リティ を 出し て いき ま 
し ょ う 。 
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透過 画像 を 効果 的 に 
組み 合わ せ た デ ザイ ン 





透過 画像 を 効果 的 に 使え ば 、 従 来 は 難 
し か っ た 複雑 な デザ イン を 作る こと が で 
きま す 。 複数 の 背景 画像 や 画像 を 使っ 
た ボー ダー な ど 、 今後 CS53 を 使う 上 で 
スタ ンダ ー ド に な っ て くる で あろ う 新 し い 
技術 を 使い 、 魅 力 あ る レイ アウ ト を 効率 
的 に 作成 し まし ょ う 。 


新規 利 用 


制作 ・ 文 高橋 と し ゆき (Graphic Arts Unit) 


制作 の ポイ ント 


border-image を 利用 し て ボー ダー に 


画像 を 使う 

背景 画像 を 複数 指定 組み 合わ せる 
負 の 値 を 指定 し て ボタ ン を 枠 か ら 飛 び 
出し て 配置 

アル レル ルル 

IIE 5 | Safari / 

| Firefox | Chrome 


※IE6 は 非 対 応 。IE7 一 9 は 一 部 の 処理 に 非 対 応 。 





ボタ ン を 枠 か ら 飛 び 出 させ る 色 の 境界 を ハー フト ー ン パタ ー ン で 装飾 

フォ ー マ ッ ト か フッ タ の 上 部 に ハー フト ー ン パタ ー ン の 透過 画像 を 用 いる こと 
ら 飛 び 出 し た ポ で 、 個 性 的 な グラ デー ショ ン 処 理 に し ます 。 

タン は 注視 度 の ー 





高い 表現 と な り 


ます 。 新規 利用 登録 


(無料 ) 





條 
の 
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パー ツ を 準備 す 


まず は 雲 の パ ー ツ を 作り まし ょ う 。 寺 
の パー ツ は 空 の 写真 か ら 雲 の 部 分 だ け 
を 抽出 し て 利用 し ます 。 

空 の 写真 を Photoshop で 開き 、 必要 な 
雲 の 部 分 だ け を 残し て 画像 を 切り 抜き 
ます 。「 イ メー ジ 」 メ ニュ ーー 「 色 調 補 
正 」ー「 彩 度 を 下げ る 」 を 実行 し て 
回 量 の よう に グレ ー ス ケー ル に し た あ 























図 証 グレ ー ス ケー ル 処 理 し た 雲 の 画像 


1 トコ 


、「 イ メー ジ 」 メニュー “色調 補 
"ーー レベ ル 補 正 .…′ で 画像 の コン 
ラス ト を 高め に 補正 し ます 回 罰 。 雲 
の ディ ティ ー ル を 損なわ な い 程 度 で 、 
空 の 部 分 が 完全 な 黒 に な る よう に 調節 
し まし ょ う 。 ど うし て も 黒く な ら な い 
部 分 が あれ ば 、 プ ブラ シ 等 を 使っ て 塗り 
つぶ し て も 構い ませ ん 回 語 。 





| 
同 








屈 局 レベ ル 補 正 後 





MEM0 
ここ で は Mac 0S X 版 の Photoshop CS5 
を 使用 し て いま す が 、 画 像 を 同じ よう な | 
状態 で 保存 で きれ ば 、 ほ か の デザ イン ツ 

ー ル や 画像 処理 ソフ ト を 使っ て も 問題 あ 

り ま せん 。 





| 座り つぶ し 後 





チャ ン ネ ル パ ネ ル を 開き 、「RGB」 の 
チャ ン ネ ル サ ム ネー ル を command 
(CtrU キク リッ ク す る と 、 攻 琶 の よう 
に 画像 の 白い 部 分 の み が 選 択 範囲 と し 
て 読み 込ま れ ま す 。 レ イヤ ー パ ネル で 
新規 レイ ヤー を 追加 し 、「 編 集 」 メニ ュ 
ーー 塗りつぶし.……” を 【[ 使 用 : ホワ 
イト ]、[ 透 明 部 分 の 保持 : オフ ] で 実 
行 し ます 。「 背 景 」 を 削除 し て 、 この 画 
像 を 透過 png と し て 保存 すれ ば 雲 の パ 
ー ツ は 完成 で す 紅 処 。 


















































ハー フト ー ン パタ ー ン 了 還 、 区 切り 用 
シャ ドウ 了 語 、 新 規 利用 登録 の 吹き 出 
し ボタ ン 工 、 タ イト ル ロ ゴ 陳 、 枠 















































内 背景 の 縦 ス トラ イプ 了 国 、 ボ タン に 
使う 矢印 慌 還 の 画像 も 用 意 し て お きま 
す 。 ハ ー フ トー ン の グラ デー ショ ン 、 
区 切り 用 シャ ドウ は 雲 と 同じ 要領 で 背 
景 透 過 に し て png 保 存 し て お きま す 。 





MEMO 


ハー フト ー ン パタ ー ン は 、Photoshop で 
グラ デー ショ ン の 画像 に "ハー フト ー ン 
パターン" フィ ル タ を 使用 し て 作成 し ま 
す 。 
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CHAPTER 01 








ハー フト ー ン パタ ー ン 了 記 区 切り 用 シャ ドウ 民主 吹き 出し ボタ ン 





区 対 艇 スト ライ ブ 














0& ー ム 要素 、 新 規 利用 登録 ボタン 、 フ ッ ー ル ド に は ラベ ル の テキ スト が 付き ま 
四 タ の 要素 が 入り ます 。 フォ ー ム の 要素 す 。 ラ ベル は label 要 素 で マー クア ッ 
続い て コー ディ ング に 入り ます 。 は テキ スト フィ ー ル ド 、 パ スワ ー ド フ プ し て お きま し ょ う 。 必 要 に 応じ て 各 
HTML に 了 還 を 記入 し ます 。div 要 素 ィ ー ル ド 、 イ メー ジ ボ タ ン の 3 種類 で 、 要素 に クラ ス 名 や id 名 を 付加 し て い 
「#content」 の 中 に 、 タ イト ル 、 フ ォ テキ スト フィ ー ル ド と パス ワー ド フ ィ まず 。 


ベー ス と な る HTML 


<!DOCTYPE htmL PUBLIC “"-//W3C//DTD XHTML 1.0 TransitionaU/EN" </form> 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitionaLdtd"> </div> 
省略 


<div id="regist"><a hre="regist.htm'><img src="images/registerpng" 


<body> width="195" height="150" alt=“ 新 規 利 用 登録 (無料 ) " /></a></div> 
<div id="content"> <div id="footer"> 





<h1><img src="images/logo.png" width="280" height="67" <ul> 
alt="CLOUD DRIVE" /></h1> <li><a href="about.html">CLOUD DRIVE に つい て </a></li> 
<div id="form"> 省略 
<form> <li><a href="inquiry.htmU"> お 問い 合わ せ </a></li> 
<P class="userid"><label for="userid">User ID</label><input </u> 
name="userid" type="text" /></p> <P class="credit">Copyright (C) CLOUD DRIVE co., Ltd. AlL Rights 
<P class="password"><label for="password">Password</ Reserved.</p> 
label><input name="password" type="password" </div> 
id="password" /></p> </div> 
<P class="login"><input type="image" name="login" id="login" </body> 
src="images/arrow png" /></p> <7htm> 由 
< 
公 国 HTML の head で CSS ファ イル を 読み 込む ? 
トン 
<link href="css/style.css" re="stylesheet' type='text/css" /> 5 
続い て CSS の コー ディ ング で す 。 ミ 
2 = ( 久 
Tstyle.css」 と いう 名 前 で 空 の テキ ス 


ト フ ァイル を 作成 し 、HTML の head 要 
素 内 に 葬 調 の 1 行 を 追加 し て 読み 込み 
ます 。 ス タイ ル は すべ て この ファ イル 
に 記述 し て いき ます 。 
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「style.css」 に 屋 還 を 記入 し ます 。 こ 
れ は 、 各 要素 の 差異 を な くす た め の 初 
期 化 処理 と 、body 要素 の 背景 と フォ ン 
ト を 指定 する も の で す 。 


続け て 葬 還 を 追記 し ます 。 これ は 全体 
を 内 包 す る 「#content」 の スタ イル で 
す 。3 8 行 目 (width: か ら top: ま で ) 

は 、 絶 対 配置 と ネガ ティ プ マ ー ジ ン を 
使っ て プラ ウザ の 中 央 に 配置 され る よ 

うに 指定 し て いま す 紅 謙 。 

続く 9 12 行 目 (backgroud: 以下 の 
4 行 ) は 背景 指定 で す 。 カ ンマ 区 切り 

で 記述 する こと で 、1 つの 要素 に 複数 
の 背景 を 指定 する こと が 可能 で す 。 こ 

こ で は 紅 調 の よう に 、 縦 スト ライ プ 
(bg.png) の 上 に 雲 の 画像 (cloud.png) 

を 2 つ 載 せ た 状 態 に し まし た 。 た だ し 、 
IE で は この 指定 が 無視 され て し まう 

た め 、CSS ハ ッ ク で IE の み を ベー ス と 

な る スト ライ プ の 背景 の み に 戻し 、 雲 
の 画像 は 後ほど JavaScript を 使っ て 挿 
入 し ます 。 

22 行 目 は 、IE で box-shadow と border- 
radius を 有効 に する た め 「PIE.htc」 

区 国 を 読み 込ん で いま す 。 


06 | 基 過 画像 を 効果 的 に 組み 合わ せ た デ ザイ ン 





計 | 全体 に 関わ る スタ イル (style.css) 


@charset "UTF-8": 


border: none: 


] 

/* 各 要素 の 初期 設定 */ input { 
body, h1. div, p, ul li a, form, input, label{ outline: 0: 

margin: 0: } 

paddind: 0: 
] / ペ ー ジ 全体 の スタ イル */ 
utit body{ 

list-style: none: background: #353535: 
} font-family: "ヒラ ギ ノ 角 ゴ Pro W3", 
at "Hiragino Kaku Gothic Pro", "メイ リオ ", 


text-decoration: none: 


outline: 0: 


} 


Meiryo, 0saka, "MS P ゴ シッ ク ", "MS 
PGothic", sans-serif: 


} 


aimgt 


個別 要素 の スタ イリ 


コン テン ツ を 内 包 す る 要素 の スタ イル (style.css) 


01 /* コ ン テ ン ツ を 内 包 す る div 要 素 */ 
02 #content { 


03 
04 
05 
06 
07 
08 


23 } 


width: 930px: 
height: 520px, 
margin: -260px 0 0 -465Px: 
position: absolute: 
left: 50%: 
top: 5096: 
background: 
url(./images/cloud.png) no-repeat 560px 220px, 
url(../images/cloud.png) no-repeat -160px -120px。 
url(./images/bg.png) repeat left top: 
-webkit-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15): 
省略 
box-shadow: 10px 10px 20px rgba(0. 0, 0 ,0.15): 
border: 10px solid #ff 
-webkit-border-radius: 15px: 
省略 
border-radius: 15px: 
/*IE6,7 に 適用 7 
background: #2badd0 url(../images/bg.png) repeat left top\9: /*IE8 に 適用 */ 
behavior: url(../css/PIE.htc): /* 動 作 さ せる に は 絶対 パス に 修正 する */ 


*background: #2badd0 url(../images/bg.png) repeat left top: 
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縦 スト ライ プ の 上 に 雲 の 画像 を 2 つ 載 せ て いる 





../images/cloud.png) no-repeat -160px -120px 





url(../images/bg.png) repeat left top 











TIPS 
PIE.htc 

複数 の 背景 指定 は 先 に 記述 し た も の が 上 、 後 に 記述 A 

し た も の が 下 に 表示 され ます 。 http://css3pie.com/ 


















MEM0 
PIE.htc で 利用 する プロ パテ ィ に は 「-pie-」 の ベン 3 
ダー プレ フィ ックス を 付加 し ます (53 ペ ー ジ 紙面 で は PIE.htc を 相対 パス で 指定 し て いま す が 、 実 際 に は http か ら 始 まる 絶対 パ * 
CHAPTER01-04「 ウ ィ ン ド ウサ イズ に 連動 する リキ ス で 指定 する 必要 が あり ます 。 
ッ ド タイ プ の フリ ー レ イア ウト 」1 の MEMO も 参 
照 )。 1 
人 ⑥) 区 凡 タイ トル と フォ ー ム 全体 を 内 包 す る div 要素 の スタ イル (style.css) 
び ツ (⑨ 
タイ トル ツ / } 6 
続け て 工 還 を 追記 し ます 。「/* タ イト #content h1 { 
ル */」 以下 は 、 タ イト ル の h1 要素 の ス padding: 70px 70px 70px 0: /* フ ォ ー ム 全体 を 内 包 す る div 要 素 7 
タイ ル で す 。h1 要素 に は タイ トル と な margii 0 20px00: prmt 
る ロゴ 画像 が 入っ て いま す が 、 右 に 背 position: absolute: _margin:000 -20pxi 
景 画像 と し て 区 切り 用 の シャ ドウ を 表 0 に 陸生 0 
OPD: Xi eft: 8 ド 
示し ます 加 衣 。 こ の よう に 、 背 景 を 透 ーー 
、 2 background: url(./images/shadow.png) top: 185px: 4 
過 し た 黒 の グラ デー ショ ン や ぼかし は no-repeat right center: ] 
立体 的 な シャ ドウ と し て 幅広 く 利 用 で 
きま す 。 区 衣 タイ トル ロゴ の 右 に [ じ 誠 '#form」 の 位置 決定 





「/* フ ォ ー ム 全体 を 内 包 す る div 要 素 区 切り 用 の シャ ドウ を 表示 ー 
*/」 以 下 は 、 フ ォ ー ム 要素 を 内 包 す る _ 3 90 | 

「#form」 の 位置 を 決定 し ます 。 left を 
50% に 設定 し て いっ た ん 左端 を 親 要 Hs 
素 の 中 央 に 揃え 、 マ ー ジ ン を 使っ て 誤 OsLiNE STORAGE SERVICE- 50GB FREE 
差 を 調節 し ます 工 罰 。 h1 要素 も 同じ 要 
領 で 位置 を 決め て いま す 。 





物 #content 


20px ペー margin で 調節 


' 
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U% 

次 に 民 還 を 追記 し て フォ ー ム 要素 や ラ 
ベル の スタ イル を 設定 し ます 。 今 回 は 
工 衣 の よう な 、 角 の 丸い 個性 的 な 印象 
の フォ ー ム に し まし た 。 

通常 input 要 素 は 、 テ キス ト フ ィ ー ル 


ド 、 ラ ジオ ボタ ン 、 送 信 ボ タン な ど 、 
いろ いろ な 種類 の フォ ー ム 要素 に 使わ 
れる た め 、 セ レク タ で の 選択 が 難し く 
な り ま す が 、 属 性 セレ クタ を 使え ば 要 
素 の 属性 値 で 抽出 で きる た め 細 か い 選 
択 が 可能 で す 。 

「/* テ キス ト フ ィ ー ル ド 、 パ スワ ー ド 





フィ ー ル ド */」 以 下 の 太 字 部 分 で は 
type 属 性 に text と password が 設定 さ 
れ て いる input 要 素 の み 、「/* イ メー ジ 
ボタ ン */」 以 下 の 太字 部 分 で は image 
が 設定 され て いる input 要 素 の み を 選 
択 し て いま す 葉 還 。 


区 記 フォ ー ム 要素 や ラベ ル の スタ イル (style.css) 


/* フ ォ ー ム 要素 の 配置 / 
#form pt 

float: left: 

margin: 0 10px 0 0: 
} 


/ パ テキ スト フィ ー ル ド の ラベ ル */ 
#form label 【 5 
display: block: 
margin: 0 0 7px 3px: 
font-family: Helvetica, Arial sans-serifi 
font-size: 14Px: 
color: #ff 


/ テ キス ト フ ィ ー ル ド 、 パ スワ ー ド フィ ー ル ド ツ 
#form input[type="text"]. #form input[type="password"] { 
position:relative: 
width: 140pxi 
height: 25px: 
padding: 5px 10px: 
-webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.2): 
省略 - 
box-shadow: inset 1px 2px 1px rgba(0, 0, 0 ,0.2): 
border: 3px solid #caeff2: - 
省略 
border-radius: 20px: 
behavior: url(./css/PIE.htc)。 
} 
#form input[type="text"]:hover, #form input[type="password"]:hover { 
border-color: #d3da21: 
0) 
#form input[type="text"]:focus, #form input[type="password"]:focus { 
border-color: #Dc93c6: 
り 


/ 動 作 さ せる に は 絶対 バス に 修正 する 


角 の 丸い 個性 的 な フォ ー ム 
ーー 


バイ メー ジ ボ タ ン ツ / 
#form input[type="image"] { 
padding: 8pxi 
position: absolute: 
bottom: 0: 
background: -webkit-linear-gradient(#e7ee2a, #c7cd1b): 
ー 首 略 一 
background: linear-gradient(#e7ee2a, #c7cd1b): 
-Pie-background: linear-gradient(#e7ee2a, #c7cd1b): 
-webkit-border-radius: 50%, 。 B 
省略 
border-radius: 50%: 
-webkit-box-shadow: 3px 3px 5px rgba(0. 0.0.0.15), 
省略 
box-shadow: 3px 3px 5px rgba(0, 0. 0 ,0.15): 
behavior: url(./css/PIE.htc)。  /* 動 作 さ せる に は 絶対 パス に 修正 する 
} 
#form input【type="image"]:hover { 
『 background: -webkit-linear-gradient(#f9ff60, #ca9d00): 
ーー 省略 一 
background: linear-gradient(#f9ff60, #ca9d00): 
-Pie-background: linear-gradient(#f9ff60, #ca9d00): 
behavior: url(./css/PIE.htC):  /* 動 作 させ る に は 絶対 バス に 修正 する 
} 


/*IE9 対 策 */ 
- 者 orm inputltype="image"]:not(ctarget) { 

left: 350pX%: _ 
background: #c7cd1b\9: 

} mm 

#form inputltype="image"]:hover:not(:target) { 
background: #ca9d00\9: 

} 


属性 セレ クタ を 使え ば 要素 の 属性 値 で 抽出 で きる 








thouU 導 。 )  ] 


| <input type="image" src="xxX.Pnd” /> 


<input type="PasSWord" /> 


<input type="text"/> ェ ーーー あみ inputltype="text"] 
ここ"* か inputltype="password'] 


ーーーー ちあ inputltype="image"] 
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10 
今回 の 送信 ボタ ン は イメ ー ジ ボタ ン と 
し て いま す 騙 還 。 画像 に は 背景 透過 の 
矢印 を 使い 、CSS で 背景 を グラ デー シ 
ョ ン 、 ボ タン の 形状 を 円 形 に 設定 し ま 
し た 。 こ うし て お け ば 、 色 の 変更 や 
hover 時 の スタ イル の 変化 騙 調 に も 
CSS の み で 柔軟 に 対応 で きま す 。 








送信 ボタ ン 





紅 記 送信 ボタ ン (hover 時 ) 





続い て 風 還 を 追記 し ます 。 新規 利用 登 
録 の 吹き 出し ボタ ン 太 詞 を 配置 する ス 
タイ ル で す 。 絶対 配置 で 「#content」 


の 右上 に レイ アウ ト し ます が 、 こ の 際 、 


四 語 の よう に right と height の 値 を マ 
イナ ス に 設定 する こと で 、 枠 か ら 飛び 


出し た 位置 へ 配置 し ます 。 こ の よう に 、 
親 要素 か ら 飛 び 出 す 配 置 を する 際 に は 、 


負 の 値 を 設定 する テク ニッ ク が よく 使 
われ る の で 覚え て お きま し ょ う 。 
hover 時 に は 、transform で 画像 を 拡 
大 し ます 。 


1E8 以 前 は transform に 対応 し て いな い 
の で 、IE の 独自 プロ バテ ィ で ある zoom 
を 使っ て 拡大 し ます 。 


抽 還 吹き 出し ボタ ン の スタ イル (style.css) 


/* 新 規 利 用 登録 の 吹き 出し ヅ 
#regist { 
position: absolute: 
right: -50px: 
top: -50px: 
} 
#regist a:hover img { 
-webkit-transform: scale(1.1, 1.1): 
省略 
transform: scale(1.1, 1.1): 
*zoom: 1.1: /*IE6.7 に 適用 7 
zoom: 1.1\9: /*IE8 に 適用 */ 
} 


山 評 】 視 か ら 飛 び 出し た 位置 へ の 配置 








#content 


新規 利用 登録 の 吹き 出し ポ ボタン 





(right:-50px, top:-50px) 


(right:0px, top:0px) 


12 

続い て 、 フ ッ タ の スタ イル と な る 古 記 
を 追記 し ます 。 こ こ で の ポイ ント は 、 
8 行 目 の border-image を 使っ た ハー フ 
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トー ン パ ター ン の ボー ダー に な り ま す 。 


border-image を 使う こと で 、 画 像 を 
使っ た パタ ー ン で ボー ダー を 表現 する 
こと が 可能 で す 。 し か も 、1 枚 の 画像 
を スラ イス する 感覚 で 、 上 下 左右 の ボ 


ー ダ ー、 四 隅 の コー ナー、 中 央 の 塗り 
を 設定 する こと が で きま す 馬 脱 還 較 。 
border-image の 内 容 は 少し 複雑 で す 
が 、 覚 えて お いて 損 は な い テ クニ ッ ク 
と いえ る で し ょ う 。 





尼 罰 フッ タ の スタ イル (style.css) 


K フッ タ 3/ 

#footer{ 
width: 100%: に 
padding: 60px 0 10px: 
Position: absolute: 
left: 0 
bottom: 0: 誠 
-webkit-border-image: url(../images/ 
halftone.png) 50 0 0 0 / 50px 0 0 0 repeat: 
省略 
*background: #ff: /*IE6.7 に 適用 7 
background: #fff\9: /*IE8 に 適用 


1 枚 の 画像 を りつ の パー ツ に 分 割 し て 使う 


バフ ッ タ (クレ ジッ ト ) 
#footer p.credit { 





} 
#footerulli{ 





display: inline: 
float: left: margin: 00 0 15px: 


} 


者 footer ullia 【 





font-si 


color: #2da6d4: _ font-size: smalr - 


font-weight: boldi 





フッタ (ナビ ゲー ショ ン ) ツ } - 

#footerul{ #footer ullia:hovert 
float: right _ color: #d3da21: 
margin-right: 15px: } 


border-image の 指定 例 





| 上 部 ボー ダー 





左上 コー ナー 右上 コー ナー 
左 部 ボー ダー 右 部 ボー ダー 
左下 コー ナー 右 下 コー ナー 


下部 ボー ダー 





@ ⑨ 
1 1 ーー? ィ ー ャ 
本 


borderpng(border-image に 使う 画像 ) border-image を 使っ た 要素 


YY や や や oo 


border-image: url(borderpng) 50 50 50 50 / 50px 50px 50px 50px repeat 








画像 を 分 割 する 位置 表示 する ボー ダー の 幅 








今回 は ハー フト ー ン パタ ー ン の 画像 を 
工 還 の よう に スラ イス し て 使い まし た 。 
ボー ダー の 幅 は 上 部 の み 指 定 し て いる 
の で 、 他 の 3 辺 は ボー ダー な し の 状態 
に な り 、 結 果 と し て 上 か ら ハ ー フ トー 
ン パ ター ンジ で グラ デー ショ ン し て いる 
イメ ー ジ を 表現 で きま す 馬 脱 。 








ハー フト ー ン パタ ー ン の 画像 を スラ イス し て 使用 





0 0 
1 1 | 
| | 
| g 上 部 ボー ダー と し て | 
使わ れる 範囲 
wev | 
と っ ーー 
ーーー 中 央 の 塗り と し て 
< ニニ ト 使わ れる 範囲 


※ 右 部 、 下 部 、 左 部 は 0 な の で 、 ボ ポー ダー 画像 は 設定 され て いな い 





上 か ら ハ ー フ トー ン パ ター ン で グラ デー ショ ン し て いる イメ ー ジ 
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1 ま cEd:【 ノ と を の) 有閑 EN/: に (dal いま 0 


最後 に 、 IE 対策 用 の JavaScript で 使用 
する スタ イル 務 還 を 追記 すれ ば CSS 
は 完成 で す 。IE で は 、 指 定 で き な か っ 
た 複数 背景 や border-image の 代替 と 
し て 空 の div 要 素 を 追加 し 、 そ こ に 画 
像 を 表示 する 処理 を 行い ます 。 


和 眉 


HTML に 戻り 、「style.css」 を 読み 込ん 
で いる link 要素 の 前 に 駐 信 を 挿入 し ま 
す 。 IE7 と 8 で は 、 左上 の 雲 画像 を 表示 
する た め の div 要 素 2 つ と フッ タ の ハ 
ー フ トー ン パ ター ン を 表示 する た め の 
div 要 素 を 追加 し ます 。IE9 は 複数 背景 
に 対応 し て いる の で 、 フ ッ タ の ハー フ 
トー ン パ ター ン 用 div 要 素 の み で す 。 
な お 、 今 回 の 作例 で は 解説 が 複雑 に な 
る た め IE6 を サポ ー ト し て いま せん 
ほ E3 屋 。 必 要 が あれ ば IE6 用 の 振り 
分 け を 行い 、 メッセ ー ジ を 表示 する な 
どの 処理 を 検討 し まし ょ う 。 








ロ 
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応 軒 IE 対策 JavaScript で 使用 する スタ イル (style.css) 


/*IE 対 策 JavaScript 用 */ 
弁 content .cloudForIE { 
width: 10096: 
height: 100%: 
Position: absolute: 
left: 0: 
top: 0: 
} 
#content .cloud1 { 
background: url(../images/cloud.png) no-repeat -160px -120px: 
} 
#content .cloud2 { 
backqround: url(../images/cloud.png) no-repeat 560px 220px: 
} 
埋 footer .borderForIE { 
width: 100%: 
height: 50px: 
position: absolute: 
left: 0: 
top: -50px: 
background: url(../images/halftone.png) repeat-x left top: 


左 吊 HTML の head で JavaScript を 読み 込む 


<!--[if (gte IE 7)&(lte IE 9)]> 
<script type="text/javascript" src='js/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="js/selectivizrjs"></script> 
<![endif--> 
<!--[if (gte IE 7)&(lte IE 8)]> 
<script type= text/javascript> 
$(document).ready(function() { 
$(#content') 
-prepend('<div class="cloudForIE cloud1"></div> ) 
-prepend('<div class="cloudForIE cloud2"></div>): 
$(#footer').prepend('<div class="borderForIE"></div>): 
): 
</script> 
<![endif--> 
<!--[if IE 9]> 
<script type= text/javascript> 
$(document).ready(function() { 
$(#footer').prepend('<div class="borderForIE"></div> ): 
): 
</script> 
<![endi--> 






06 | 透過 像 を 効果 的 に 組み 合わ せ た 


証 衣 作例 の 完成 イメ ー ジ (正常 な 表示 結果 ) IE6 で の 表示 結果 











MEM0 | 


中 語 で 読み 込ん で いる 「selectivizrjs」 還 は IE8 以前 で サポ ー ト され て いな い CSS セ レク タ 
を 使え る よう に する も の で す 。 jQuery( 盟 な どの JavaScript ラ イブ ラリ と 合わ せ て 使い ます 。 


団 selectivizrjs 


http://selectivizrcom/ 


Tselectivizri は ロー カル で は 動作 し な い 
こと が ある の で 、 サ ー バ ー に アッ プロ ー 


因 jQuery 

ド し て か ら の 確認 が 必要 で す 。 ま た 、 外 

http://jquery.com/ 部 CSS し か 認識 し な いた め 、 埋 め 込み や 
イン ライ ン で の 記述 で は 動作 し ませ ん 。 











まとめ CONCLUSION] 


画像 は gif の み で し た 。 gif で ( 明 す 。 単純 な ドロ ッ プ シャ ドウ や グラ デー ショ ン な ど は 
きず 、 デ ザイ ン パ ー ツ と し て 利用 する 場合 C553 の み で も 表現 で きる よう に な っ て きま し た が 、 


く の 制 約 に 悩ま され まし た が 、 モ ダン プラ ウザ の まだ まだ が 複雑 な も の は 画像 に 頼ら ざる を 得 ませ ん 。 状 
丘 年 は png の 透過 画像 が 比較 的 自由 に 1 と り じ て うま く 使 い 分 け 、 効果 的 な デザ イン を 目指 
画像 に よる 表現 力 が 大 きく 広がっ て いま も ま よら ラ 。 
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Pr ヨド SI 
レイ アウ ト 


に に を シオ: レター を Pr ゆこ 
アロ ョ レル 3 ノレ ルン レン 2 





写真 欄 の パー ツ や 捕れ な どの テク スチ ャ 
を 使っ た アナ ログ テイ スト の デザ イン を 
実現 し ます 。WebKit ベー ス の Safari や 
Chrome で は 文字 を テク スチ ャ で マス キ 
ング し て 、 質感 の ある 印象 に 仕上 げ ま す 。 
要素 を 回 転 し た り 、 写真 に 捕れ の テク ス 
チャ を 重ね て 、 よ り ア ナ ロ グ な 印象 を 高 
め ま し ょ う 。 


制作 ・ 文 高橋 と し ゆき (Graphic Arts Unit) 
写真 提供 / 写 真 素材 足 成 
http://www.ashinari.com/ 


明 テ キス ト に Web フォ ント を 利用 する 
明 mask-image で テキ スト を マス キン グ 
上 rotate を 使っ て 要素 を 傾け る 


| IE P.E | | safsri ノ 9』 








| Firefox 以上 | | chrome >12 以 」 | 
※IE6 以上 で 表示 は 確保 され る が 、 一 部 の 処理 に 非 
対応 。 


テキ スト や 写真 を テク スチ ャ で マス キン グ す る 要素 を ラン ダム に 配置 する 


写真 か ら 作 っ た テク 
スチ ャ で テキ スト を 
マス キン グ す る こと 
で 、 ア ナ ロ グ 感 を 強 
調 し ます (画像 上 )。 
また 、 写 真 の 上 か ら 
抗 れ の テク スチ ャ を 
重ね る こと で 、 リ ア 
ル な 表現 を 演出 し ま 
す (画像 下 )。 
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タイ トル や サム ネー 
ル 写 真 な どの 要素 を 
ラン ダム に 傾け 、 レ 
イア ウト に 動き を 出 
し ます 。 











加 還 和紙 の テク スチ ャ 口 記 】 背景 を 透明 に する 


まず は レイ アウ ト に 使う パー ツ を 用 意 
し ます 。 最 初 は 写真 梓 で す 。 固 還 の よ 
うな 紙 の テク スチ ャ を 撮影 、 ま た は ス 
キャ ン し 、 切 り 抜き ます 回 園 。 
Photoshop の レイ ヤー 効果 で ドロ ッ プ 
シャ ドウ を 加え た ら 、 透 過 png と し て 
保存 し まし ょ う 回 還 本 3。 さ ら に 、 痛 
景 に 使う 木目 の テク スチ ャ 絞 語 と 、 写 
真 画像 3 点 回 詳 も 用 意 し て お きま す 。 






























避 語 ドロ ッ プ シャ ドウ の 設定 画面 ドロ ッ プ シャ ドウ を 追加 口語 木目 の テク スチ ャ 


な 才 あー ニー ニニ ーー 














1 ーー 
LED 
ET 国 。」 ェ ェ シャ ル 
ELEizZ22 
wa as 一 一 sk 件 萬 スタ イル 
ae 29 | 生 wmw テ 屋 フレ ピュ 
mm e 時 
1 
ve に の 
ame 選 ー 


に する ) ( 科 に 束 す 


[写真 3 点 





MEM0 ーー 


ここ で は Mac 0S X 版 の Photoshop CS5 
を 使用 し て いま す が 、 画 像 を 同じ よう な 
状態 で 保存 で きれ ば 、Fireworks な ど 、 ほ 
か の デザ イン ツー ル や 画像 処理 ソフ ト を 
使っ て も 問題 あり ませ ん 。 
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CHAPTER 01 





続い て 、 タ イト ル 部 分 な どの マス ク と 
し て 使う テク スチ ャ を 用 意 し ます 。 こ 
れ に は コン クリ ー ト の 写真 を 利用 し て 
作っ た 透過 画像 (mask.png) 区 還 を 
用 いま す 。 さ ら に 同じ 要領 で 、 写 真 に 
捕 れ た 効果 を 付け る た め の 画 像 も 用 意 
し ます 。 今回 は コピ ー 機 で 作っ た ノイ 
ズ (noise.png) 茎 較 を 利用 し まし た 。 
両方 を 透過 png と し て 保存 し ます 。 








区 凡 コン クリ ー ト の 写真 を 利用 し て 作っ た 透過 画像 





ベー ス と な る HTML / CSS の 作成 


続い て HTML の コー ディ ング で す 。 
HTML を 避 還 の よう に 記述 し ます 。 タ 
イト ル 等 の 入る div 要素 「#header」、 
写真 を 配置 する た め の ul 要 素 
「#thumb」 が あり 、 こ れ ら 全体 を 
「#content」 と いう id の div 要 素 で 囲み 
ます 。 

「#header」 の 最後 に は 、 詳細 ペー ジヘ 
移動 する た め の ボ タン が あり ます 。 こ 
れ は 、p 要 素 「.btn」 の 中 に 「MORE 
PHOT0O」 と いう テキ スト の リン ク を 入 
れ た 形 で す 。 

「#thumb」 の 1 要素 は 3 つ あ る の で 、 
写真 は 3 点 と いう こと に な り ま す 。 そ 
れ ぞ れ の 要素 に は 写真 と キャ プシ ョ 
ン が 入っ て お り 、1 つ ずつ 個別 の クラ 
ス 名 を 付加 し て お きま す 。 こ こ で は 
「.thumb1」「.thumb2」「.thumb3」 と 
し まし た 。 


民 罰 ベー ス と な る HTML 


<!DOCTYPE htmL PUBLIC "-//W3C//DTD XHTML 1.0 TransitionaU/EN" "http://www.w3.org/ 
TR/xhtmL1/DTD/xhtml1 -transitionaLdtd"> 
省略 
<body> 
<div id="content"> 
<div id="header"> 
<h1><span>2012.5.20. LIVE in TOKYO</span>GALLERY.</h1> 
<p>Nunc a orci augue. Suspendisse vestibulum volutpat magna quis tempus. Praesent 
hendrerit, magna sit amet auctor aliquam, lacus purus consectetur lacus, sed 
venenatis eros tellus a lorem.</p> 
<p>Praesent hendrerit, magna sit amet auctor aliquam, acus purus consectetur 
lacus.</p> 
<p>Photo by ashinari.com</p> 
<P class="btn"><a href="#">MORE PHOTO</a></p> 
</div> 
<ul id="thumb"> 
<li class="thumb1"> 
<div class="photo"><img src="images/photo1.jpg" width="280" height="280" 
alt="photo" /></div> 
<P class="caption"><a href="# が ">Vestibulum purus elit.</a></p> 
(> 
<li class="thumb2"> 
<div class="photo"><img src="images/photo2.jpg" width="280" height="280" 
alt="photo" /></div> 
<p class="caption"><a hre に "#">Pellentesque feugiat risus.</a></p> 
<> 
<li class="thumb3"> 
<div class="photo"><img src="images/photo3.jpg" width="280" height="280" 
alt="photo" /></div> 
<p class="caption"><a href="#">Nam in aliquet libero.…</a></p> 
</l> 
<u> 
<7div> 
</body> 
<7htm> 
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HTML の head で JavaScript と CSS を 読み 込む 





01 <link re に "stylesheet" type="text/css" href="css/style.css" /> 


続い て CSS5 の コー ディ ング に 移り ま _02 <!--fIE6]> 

す が 、IE だ け は 個別 の 処理 を し て や る 03 <script type="text/javascript" src="js/DD_belatedPNG_0-1.0.8a.js"></script> 
必要 が ある の で 、 対 応用 に 別 の CS5 フ Ua 

ァイル を 用 意 し ます 。 基 本 の スタ イル 05 <!--[if (gte IE 6)&(lte IE 8)]> 


06 <link re="stylesheet" type="text/css" href="css/styleforie.css" /> 


を ・「style.css」、IE6 ~- 8 用 の スタ イル ー 
07 <l[endifl--> 


を 「styleforie.css」 と いう 名 前 に し ます 。 
それ ぞ れ の ファ イル 名 で 空 の テキ スト 
ファ イル を 2 つ 用 意 し 、 HTML の head 
要素 に 屋 罰 を 追記 し ます 。 http://www.dillerdesign.com/experiment/DD_belatedPNG/ 
2 4 行 目 は 、IE6 で 透過 png を 扱う た 

め の JavaScript プ ラグ イン 「DD_ 

belatedPNG」 茎 廊 を 利用 する た め の 記 

述 で す 。 続く 5 行 目 以降 で IE6 … 8 を 

対象 に 「styleforie.css」 を 読み 込み ます 。 


DD_belatedPNG 


人 避 全体 に 関わ る スタ イル (style.css) 
て )) 


@charset "UTF-8": 
「style.css」 に 華 還 を 記入 し ます 。 


「/*Google web fonts の 読み 込み 7」 以 /*Google Web Fonts の 読み 込み 7 

下 で は 、Google Web Fonts 陣 軸 か ら @import url(http://fonts.googleapis.com/css2family=0swaldISquada+One): 

必要 な フォ ント を 読み 込む よう 指定 し 

ます /* 各 要素 の 初期 設定 

- こ body, h1, p, span { 

そし て 「/* 各 要素 の 初期 設定 7」 以 下 ーー 

で は 各 要 素 の margin と padding を 0 に adind80: 

設定 し 、「/* ペー ジ 全 体 の スタ イル */」 } 

以下 で ペー ジ 全 体 の 背景 画像 を 指定 し 

ます 。 / ペ ー ジ 全体 の スタ イル */ 

「/* コ ン テ ン ツ 全 体 の スタ イル */」 以 body{ 

下 で は 要素 全体 を 囲む 「#content」j、 そ background: url(../images/bg.jpg) repeat: 
} 


の 下 で は タイ トル と リー ドコ ピー、 
「MORE PHOTO.」 ボ タン を 含む 
「#header」 の スタ イル を 設定 し ます 。 


/ コ ン テ ン ツ 全 体 の スタ イル 














#content { 
「#header」 は transform で 反 時 計 回 width: 100%: 
り に 10" 回 転 さ せま す 陣 主 。 height: 820px: 
overflow: hidden: 
} 


バタ イト ル 、 リ ー ド コピ ー、MORE PHOTO リ ンク を 内 包 す る div 要 素 の スタ イル 
#header { ーー 
width: 2500px: 
margin: -50px 0 0 -25px: 
-webkit-transform: rotate(-10deg): 
省略 一 
transform: rotate(-10deg): 


} 
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CHAPTER 01 


記 衣 oogle Web Fonts 亡 届 「#header」 を 反 時 計 回 り に 10* 回 転 さ せ て いる 


http://www.google.com/webfonts/ 


IE で は 、 ロ ー カ ル 上 で 確認 する と フォ ント が 正常 に 表示 さ 
れ な い 場 合 が あり ます 。 


IE は transform に 対応 し て いな い の で 回 転 さ せる こと は で 
きま せん が 、 表 示 内 容 の 可読性 は 保持 で きま す 。 








MEMO _ ーー _ 島 


transform プロ パテ ィ を 使う と 、 い ろ い ろ な 変形 を 行う こと が で きま す が 、 合 わせ て transform-origin プロ パテ ィ を 用 いれ ば 、 変 形 の 基準 点 を 
要素 に 対す る X 座 標 と Y 座 標 で 指定 で きま す 。 例 えば 「transform-origin: 0 0.」 の よう に 指定 する と 、 要 素 の 左上 が 変形 の 基準 と な り ま す 。 今 
回 は transform-origin プロ パテ ィ を 使っ て いな い の で 、 要 素 の 中 央 が 基準 点 に な っ て いま す 。 


タイ トル 淀 な どの スタ イル の 作 


いま す 。 単純 に 考え れ ば h1 要 素 の で 、overflow を hidden に 設定 し ます 

width を 長め に 設定 すれ ば 問題 あり ま 民 還 。 こ うす れ ば 、 画 面 サ イズ を 縮め 
今回 は h1 要素 を 帯状 の デザ イン に し せん が 、 そ の まま だ と 横 方 向 の スク ロ て も スク ロー ル バ ー が 表示 され る こと 
ます が 、「#header」 の 角度 を 右上 が り ー ル バー が 出 て し まい ます 。 そ れ を 考 が あり ませ ん 。「#header」 の 細か い 位 
に 回 転 さ せ た と き に h1 の 帯 を 画面 外 慮 し て 、「#header」 を 内 包 す る 置 は margin を 使っ て 微 調節 し ます 。 
へ は み 出 す と ころ まで 伸ばし た いと 思 「#content」 の width を 100% に し た 上 


























区 叫 スク ロー ル バ ー を 出さ な いた め の 工 夫 












ウィ ンド ウサ イズ ウィ ンド ウサ イ 
body 要 素 - body 要 
#content #content 
スク ロー ル バ ー 回 還 還 mm 加 
overflow の 指定 な し overflow:hidden 
| MEM0 





写真 の ul 要素 「#thumb」 も 「#content」 の 内 部 に あり ます が 、 最終 的 に 
position を absolute に 設定 し て 通常 フロ ー か ら 外 す た め 、「#content」 に 
よっ て 隠れ て し まう こと は あり ませ ん 。 





76 





続け て 民 還 を 追記 し ます 。「/* タ イト 
ル 帯 の スタ イル */」 以 下 は タイ トル の 
h1 要素 の スタ イル で す 。 帯 の 背景 に 
マス ク 用 画像 を 表示 し ます が 、 





避 訓 タイ トル 帯 な どの スタ イル (style.css) 


な タイ トル 帯 の スタ イル */ 
#header h1 { 
font-size: 120px: 
color: #f: 
font-family: 'Squada One', cursive: 
padding: 20px 0 10px 80px: 
position: relative: 
background: url(../images/mask.png): 
} 
/*webkit の み 上 書き */ 


@media screen and (-webkit-min-device-pixe-ratio:D){ 


#header h1{ 
background-image: none: 
background: #c90050: 


-webkit-mask-imadge: url(./images/mask.png): 


mask-image: url(./images/mask.png): 


} 

#header h1 span { 
display: blocki 
font-size: 30pxi 


パー ドコ ヨ ピ ー の タイ で イル 
#headerp【 
width: 300px: 
padding: 25px 0 0 80px: 
font-family: "0swald', sans-serifi 
color: #fff: 


攻 長 】 テキ スト の マス キン グ 結 果 





「/*webkit の み 上 書き */」 以下 で 
WebKit ベ ー ス の ブラ ウザ (Safari や 
Chrome) の み を 対象 に background を 
書き 換え 、 さ ら に mask-image で 要素 
全体 を マス ク 画 像 で マス キン グ し ます 
3 誠 。 こ うす る こと で テキ スト に 





も テク スチ ャ が 加わ り 、 ア ナ ロ グ な イ 
メー ジ に な り ま す 。 そ の 下 の リ ー ド コ 
ビ ピー、「MORE PHOTO」 ボ タン の スタ 
イル で も h1 と 同様 に mask-image を 
利用 し て いま す 。 


-webkit-mask-image: url(../images/mask.png): 


mask-image: url(../images/mask.png): 


/MORE PHOTO リ ンク の スタ イル */ 


p.btn at 


display: inline-block: 

padding: 10px 30px: 

margin-top: 12Px: 

backqround: #000: 

font-family: 'Squada One', cursive: 


color: #ff 


text-decoration: none: 


font-size: 30px: 


-webkit-mask-image: url(../images/mask.png): 


mask-image: url(./images/mask.png): 


} 
p.btn a:hover { 


background: #c90050: 


color: #000: 


記 訓 マス キン グ の 仕組 み 





ペーmask-image 








MEMO 


Lー 





| mask-image は 、 指 定 し た 画像 の アル ファ チャ ン ネ ル (透明 度 ) に 
従っ て 要素 を マス キン グ す る プロ パテ ィ で す 。 ま た 、 マ スク 用 の ソ 
| ー ス に は 画像 だ け で な く グ ラ デ ー シ ョ ン も 利用 で きま す 。 


現在 mask-image を サポ ー ト し て いる の は WebKit の みな の で 、 そ 
れ 以 外 の プラ ウザ で は テキ スト に マス ク は 適用 され ませ ん が 、 可 視 
性 に 支障 は あり ませ ん 。 
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CHAPTER 01 


写真 の スタ イル の 作成 


に absolute を 指定 し て 、 要素 を 絶対 配 で す 。 

置 に し ます 。 さら に 、「#header」 と 同様 に transform: 
続い て 、 写 真 に 関す る スタ イル と し て それ 以降 で は 、 写 真 3 点 の スタ イル を rotate を 使っ て 写真 の 角度 を 指定 し ま 
区 還 を 追記 し ます 。 ま ず は 写真 3 点 と 個別 に 指定 し て いま す 。 要 素 の 位置 を す 。 こ うす る こと で ラン ダム な 配置 が 
も に 適用 する 共通 スタ イル で 、 中 要素 left、top の プロ パテ ィ で 指定 し ます 。 より 強調 され 、 写 真 を ば ら ま いた よう 
の 背景 に 写真 枠 の 画像 を 使い 、position これ は 親 要素 の 左上 を 原点 と し た 座標 な イメ ー ジ に 仕上 が り ま す 研 軸 。 








区 証 写真 枠 の スタ イル (style.css) 


/* 写 真 枠 点 の 共通 スタ イル */ 
ulthumb { /* 写 真 枠 2 
list-style: none: ul#thumb li.thumb2 { 
} left: 760px: 
u#thumb li{ top: 150px: 
position: absolute: -webkit-transform: rotate(30deg) 
width: 328px: 省略 
height: 404px: transform: rotate(30deg) : 
background: url(../images/photo_bg.png) no-repeat: } 
} 
/* 写 真 枠 3*/ 
写真 枠 1/ u#thumb li.thumb3 { 
ul#thumb li.thumb1 【 left: 440px: 
left: 470px: top: 380Px: 
top: -20Pxi -webkit-transform: rotate(-20deg) : 
-webkit-transform: rotate(7deg) : 省略 
省略 transform: rotate(-20de9) : 
transform: rotate(7deg) : } 


1) 


[ じ 衣 写真 ご と に 角度 と 表示 位置 を 変え て いる 


IE は transform に 対応 し て いな い の で 回 転 さ せる こと は で きま せん 
が 、 コ ン テ ン ツ の 可読性 は 確保 され ます 。 
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次 に 國 還 を 追記 し ます 。 こ れ は 、 写 真 
枠 の 中 に 表示 する 写真 の スタ イル を 設 
定 し ます 。 ま ず 共 通 ス タイ ル と し て 、 





区 凡 写真 の スタ イル (style.css) 


/* 写 真 の 共通 スタ イル */ 
.photo { 
width: 280px: 
height: 280px: 
margin: 25px 0 0 22Ppx: 
position: relative: 


} 


/* 写 真 に 近 れ の テク スチ ャ 画像 を 重ね る 
.photo:after { 

content: url(.…/images/noise.png): 

Position: absolute: 

width: 280px: 

height: 280Ppx: 

left: 0: 

top: 0: 


IE は after に 対応 し て いな い の で 、 擦 れ 
の テク スチ ャ は 後ほど JavaScript で 挿入 
し ます 。 


o 





最後 に キャ プシ ョ ン の スタ イル 騙 還 を 
追 包 し ます 。 キ ャ プシ ョ ン の テキ スト 
を a 要 素 で マー クア ッ プ し て あり ます 
が 、 こ れ を 功 調 の よう に 1 要素 全体 に 
広げ る こと で 写真 枠 全 体 を クリ ッ カ プ 
ル に し て いま す 。 こ こま で で 基本 の ス 
タイ ル は 完成 で す 功 調 。 


ショ ン の スタ イル の 1 


07 | CSS3 と 画像 を 組み 合わ せ た ア ナ ロ グ テイ スト の デザ イン 


写真 の 位置 や 大 き さ を 指定 し て いま す 。 
ここ で 注目 し た い の が その あと の 処理 
で す 。「.photo」 の div 要 素 に 擬似 クラ 
ス の after を 使っ て 近 れ の テク スチ ャ 
画像 を content と し て 追加 し 、 そ れ を 


世 記 テク スチ ャ を 重ね る 仕組 み 







png を div#photo に 対し て 
擬似 クラ ス の 「:after」 で 挿入 。 
さら に 、「position:absolute」 で 
div#photo の 左上 に 揃え る 。 





孔 思 キャ プシ ョ ン の スタ イル (style.css) 
キャプション の リン ク を 写真 枠 全 体 に 広げ 
る 
.caption a { 

display: block: 

position: absolute: 

left: 0: 

top: 0: 

padding: 314px 25px 0 22px: 
width: 281px: 

height: 90px: 


ー div#photo 


img 


で NERV 





絶対 配置 で 写真 の 左上 に 揃え ます 績 諸 。 
after で 追加 し た content は 内 容 よ り も 
上 に 表示 され る の で 、 こ れ に よっ て 写 
真 の 上 に 擦れ の テク スチ ャ を 重ね る こ 
と が 可能 で す 工 語 区 2。 


切 評 テク スチ ャ を 重ね る 前 








font-family: "0swald', sans-serifi 
text-decoration: none: 

color: #000: 

font-size: 15px: 


/* キ ャ プシ ョ ン の hover*/ 
caption a:hover{ 

color: #f39: 
} 
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CHAPTER 01 


由衣 写真 枠 全体 を クリ ッ カ ブル に する 仕組 み 不評 完成 イメ ー ジ 






div#photo 


ll 要素 





キャ プシ ョ ン の a 厩 素 を 「display:block」 に し て 

要素 を 覆う よう に 広げ る 。 

さら に 、「position:absolute」 で || 朗 素 の 左上 に 揃え る 。 IE で は a 要 素 の 下 に テキ スト や 画像 が ある と その 部 分 は クリ ッ カ プ 
ル に な り ま せん が 、 文 字 自 体 は クリ ッ ク で きる の で 、 ア クセ シビ ピリ 
ティ に 支障 は あり ませ ん 。 





IE 対策 用 の スタ イル 、JavaScript の 作 


四 還 IE6 て 8 用 の レイ アウ ト 


続い て 、IE 対策 用 の スタ イル で す 。IE 20l2.5.20. LIVE in TOKYO 


6 8 で 要素 を 回 転 させ る の は さま ざ 5HLLE 1 A と 1 








ロ 














まな 支障 が あり 難し いた め 、 今 回 は 
IE6 ~ 8 の み 騙 記 の よう に すべ て を 通 
常 の 角度 で 表示 する レイ アウ ト と し ま 
す 。 こ の た め 、IE6 8 の み に 適 用 す 
る スタ イル を 「styleforie.css」 と いう 
別 フ ァイル に 記述 し て デザ イン を 調節 mm0REPHDTO 
し ます 。 な お 「styleforie.css」 は 、 必 
ず 「style.css、 の あと に 読み 込む よう 
に し まし ょ う 。 

















MEM0 | 4 


IE6 ~- 8 で 要素 を 回 転 す る に は 、cssSandpaper 還 な どの JavaScript プラ グイ ン を 使う 方 
法 も あり ます が 、 今 回 の 作例 で は 一 部 に 支障 が 出る た め 使 用 し て いま せん 。 














MCSSe タ て AN ネェ 


還 cssSandpaper 


http://www.useragentman.com/blog/csssandpaper-a-cSS3- 
javascript-library/ 
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きま 


間 


を 


h 


ーー 


トン: 


| の ) 
どー 


「styleforie-css」 に 騒 生 を 記入 し ます 。 
最初 に 、 タ イト ル や 写真 を 回 転 し な か 
っ た こと に よっ て 生じ る 位置 の ずれ を 
調整 し ます 。 続い て 、after で 挿入 で き 
な か っ た 写真 の 捕れ テク スチ ャ を 
JavaScript で 挿入 する 際 の スタ イル を 
設定 し ます 。 


styleforie.css 


@charset "UTF-8": 


位置 の ずれ を 調整 */ 
#header h1 { の 
margin: 100px 0 0 -30px: 
background: transparent url(../images/ 


mask.pnd): 
} 
#headerpt 
padding: 25px 0 0 55px: 





 /*JavaScript で 追加 する 挟 れ テク スチ ャ 画像 
の スタ イル */ 
_.photonoise { 

position: absolute: 

lefE0. 

top: 0: 

width: 100%: 

height: 100%: 

background: url(../images/noise.png) 


no-repeat: 





HTML へ 戻 り 、heag 要 素 内 で 
「styleforie.css」 を 読み 込ん で いる Iink 
要素 の あと に 、 双 証 を 追記 し ます 。 


民 証 HTML の head で JavaScript を 読み 込む 


01 <script type="textjavascript" src="js/jquery-1.7.1.js"></script> 


02 <script type='text/javascript> 
03  。$(document).ready(function() { 


04 $(".photo img).after('<div class="photonoise"></div>): 


1 行 目 は JavaScript ラ イ プラ リ の 05 if(navigatoruserAgent.indexOf("MSIE 6")>=0){ 


Querya を 読み 込み ます 。 06 DD_belatedPNG.fix('.transparent'): 

5 07 $(#header h1).addClass('transparent'): 
続く 4 行 目 で 、 after 要 素 で 挿入 で き な 08 $(#thumb ").addClass('transparent'): 
か っ た 擦 れ テ クス チャ を 写真 の あと に 09 $('.photonoise ).addClass('transparent'): 
追加 し ます 。 6 ご ) 
さら に 、6 行 目 で 「DD_belatedPNG」 11 ): 

を 有効 に する た め の 処 理 を 行い ます 。 12 </script> 

この 例 で は 「transparent」 と いう ク 

ラス 名 が 付く png 画像 の 透過 を 有効 に EE jouep 

し ます 。 http://jquery.com/ 


7 て 9 行 目 で 、 透 過 を 有効 に し た い 要 
素 に 「transparent」 の クラ ス 名 を 追 
加 し て いま す 。 


まとめ [cOoNcLUSION] 


CSS3 を 使う こと で 、 無 駄 な 画像 を 作る こと な く 必 特に 、after を 使っ た 画像 の 多重 表現 は 使い どこ ろ も 多 
最小 限 の 画像 で アナ ログ な 質感 を 表現 する 手法 が く 、 覚 えて お いて 損 の な い テ クニ ッ ク で す 。 た だ し 、 


ま も だ ご プラ ウザ に 2 アナ ログ 表現 も や りす ぎ は 禁物 。 ア クセ ント と し て 使 
全 と は いえ ませ ん カ う よ 
効果 的 な 表現 が 可 


う 
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テキ スト が 読み や すい 


段 組 み レ イア ウト 






テキ スト 主体 の Web ペー ジ を 制作 する 
際 、 大 事 な の は 文章 自体 の レイ アウ ト に 
加え て 、 見 出し や 本 文 の 強弱 に 気 を つけ 
る こと で す 。 column-count プ ロ パ ティ 
を 使う こと で 段 組み を 表現 で き 、 よ り 読 
みや すく する こと が で きま す 。 


草川 竜之介 


制作 ・ 文 / 藤 本 勝己 (株 式 会 社 レ リー フ ) 


制作 の ポイ ント 


邊 ine-height で 行間 を 設定 
下見 出し と 本 文 に 強弱 を つけ る 


計 column-count を 使っ て 段 組 み を 表現 
する 


対応 プラ ウザ 


jE ゝ P E | [safsri 5.1 以 」 ] 
[Firefox 〉 9 以 [ ] [chrems> 16 以 上 ] 
強調 し た い 場所 を 見 極め る 行間 や 余白 の バラ ンス に 配慮 する 
欲張っ て 多く の 文章 を 目 写真 や イラ スト 等 を 追加 


し て 、 文 字 だ け に な ら な 
いよ う 工 夫 し まし ょ う 。 
行間 や 余白 を 取る こと も 
重要 で す 。 


立た せよ うと する と 、 か 
えっ て 強調 し た い 場 所 が 
わか り に くく な り ま す 。 
優先 すべ き 箇 所 を 見 極め 
て 装飾 し まし ょ う 。 
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08 | テキ スト が 読み や すい 段 組 み レ イア ウト 








見 出し や 読ま せ た い 部 分 を 目立た せる 


01 


テキ スト ベ ペース の ペー ジ 回 国 を 装飾 し 
て 、 見 栄え 良く し て いく 内 容 を 説明 し 
ます 。 


テキ スト だ け で 構成 され た ペー ジ 














02 
見 出し に する 部 分 に 、 フ ォ ン ト サ イ ズ 、 


フォ ント 色 、 背 景 ・ 囲 い 等 の 装飾 を 使 
い 分 け て 目立た せ て いき ます 茎 還 可 。 


HTML の 記述 


<body> 
<h1> 草 川 竜之介 </h1> 
<table> 
<tr> 
<th scope="row'> 誕 生 </th> 
<td>1892 年 3 月 1 日 <br /> 
<a href="http://ja.wikipedia.org/wiki/ 
%E3%839%95%E39%829%A19%E3%82%A 
4%E3%83%AB:Flag_of_Japan.svg" 
title=" 日 本 の 旗 "></a> 日 本 ・ 東 京 市 京 
橋 区 入船 町 8 丁目 </td> 
<7tr> 
<tr> 
<th scope="row"> 死 没 </th> 
<td>1927 年 7 月 24 日 ( 満 35 歳 没 ) <br /> 
</td> 





装飾 を 施し た ペー ジ 

















hi( 作 者 名 ) 
【 
= = cs 
で 
人 
っ 宮 各 ーーー 
= ーー・ 
1 る ma ] 
mk し | = ] 




















MEM0 


攻 の HTML は コー ディ ング の 途中 
段階 の も の の た め 、 完 成 後 の HTML 
の ソー スコ ー ド で は 一 部 変更 され て 
いま す 。 





</tr> 


<tr> em 
<th scope="row"> 国 籍 </th> 


<td> 日 本 </td> 
tr 
<tr> 

<th scope=" 














<tr> 


</tr> 








<tr> _ 
<th scope="row > 主題 </th> 
<td> 近 代 知識 人 の 苦悩 </td> 






.wikipedia.org/wiki/ 草 川 

_blank"> 草 川 竜之介 </a>」 
(2012 年 1 月 8 日 (日 ) UTC の 版 ) 『 ウ ィ キ ペデ 
ィ ア 日 本 語 版 』。 

<hr /> 


Hi25 崩 認 22 
_<h4> 一 猫 <7h4> 
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CHAPTER 01 





h2 要素 を text-shadow で 装飾 


「」 カ ンマ 区 切り で 複数 の 値 が 列挙 さ text-shadow プロ パテ ィ に より 表示 さ 
れ た 場合 、 先 に 指定 され た 値 が 上 に 、 れ た 影 の 部 分 は 、 レ イア ウト に 影響 を 
h2 要 素 (ここ で は 作品 名 ) に text- 後に 指定 され た 値 が 下 に 重なっ て 表示 及ぼ さ ず 、 ス クロ ー ル バー も 発生 させ 











shadow プロ パテ ィ で 装飾 し て 強調 し され ます 。 ませ ん 。 
ます 。text-shadow は 、 テ キス ト に 対 
し て 影 を つけ る こと が で きる プロ パテ 区 一 text-shadow プ ロ パ ティ の 基本 的 な 記述 
ィ で す 。 
値 に は 、shadow を 指定 し ます 。shadow text-shadow : 2Dx 4DX 6Dx #666666: 
は 「,.」 カ ンマ で 区 切る こと が で き 、 複 横 方 向 の ずれ ーー し 影 の 色 
数 指定 も 可能 で す 民 証 。 縦 方 向 の ずれ ぼかし 具合 
人 万 区 語 CS5 の 中 で の text-shadow の 記述 例 区 選 HTML 
っ h2【 <h2> 上 貝殻 </h2> 
影 の 指定 は text-shadow プロ パテ ィ の Padding: 8px: 
易 合 、2 つ て 4 つの 長 さ と 色 が 一 組 と border: 1px solid #000066: 
な り ま す 。 例 えば 「2px 2px 3px 999」 color: #003366: 
で 一 組 の 指定 に な り ま す 区 語 必 33。 text-shadow:2px 2px 3px #999: 


(box-shadow プロ パテ ィ で の 指定 と は 


ー 部 異な り ま す 。) 


た だ し 、 プ ラウ ザ に よっ て は 4 つつ 目 の 文字 に 影 が つい た 


長 さ ( 影 の 広がり 幅 ) に 対応 し て いな 
いな ど 、 完 全 に 対応 し て いる 環境 ば か 貝殻 づつ | 上 躍 殻 
り で は な いた め 、 基 本 的 に は 必ず 長 さ 


を 3 つ 指 定 し て お く と いい で し ょ う 。 

















人 攻 [ 王 olumn-count プ ロバ ティ の 基本 的 な 記述 
U ざ ー MEMO 
column-count を 使う と 、 長 い 文章 を column-count : 2: 今 まで は 少々 手間 の 掛か っ た 横並び 

cs ニー ニ ニカ 所 の 段 組 み 変更 が column-count を 利 
人 カラ ム の 数 用 する こと に よっ て 、 数 字 ( 値 ) を 
column-count プロ パテ ィ の 値 に は 、 1 変え る だ け で 簡単 に 行え る よう に な 
以上 の 整数 を 指定 し ます 。 そ れ に より 、 り ま す 。 た だ し 、 あ まり 分 割 し すぎ 

呈 Sa る と 逆 に 読み に くく な る こと が ある 
カラ ム の 数 が 決定 され ます 医 還 。 の で 、 段 組み を 増やし すぎ な いよ う 
column-width プロ パテ ィ が 指定 され 注意 し て くだ さい 。 ま た 「column- 

な い 場 合 に 三 < count:auto」、 と し た 場合 に は 、 ほ か 

0 の プロ パテ ィ に より 自動 で 段落 数 が 
決定 され ます 。 決定 され ます 。 
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08 | テキ スト が 読み や すい 段 組み レイ アウ ト 


区 記 CSS で の 段 組 指定 





Firefox、Chrome、Safari で 表示 させ 
る た め に 、-moz-、-webkit- を 付け 足 


-webkit-column-count:2: 


-moz-column-count:2: 











し た も の も 、 同 じ よ うに 記述 し ます Column-count:2: ー ーー 
EC。 表 示す る と 臣 還 の よう に な トー EE E 
} 


り ま す 。 


HTML 


<div class="dankumi"> 








<p> 彼 等 は 田舎 (お なか) に 住ん で ある うち に 、 猫 を 一 匹 伺 ふ こと に し た 。 猫 は 尾 の 長い 黒 猫 だ つた 。 彼 等 は この 猫 を 訪 ひ 出し て か ら 、 や つと 販 の 


炎 難 だ け は 免 ( ま ぬ か ) れ た こと を 喜ん で ゐ た 。</p> 


<P class="photo"><img src="images/photo01jpg" alt=" 猫 の 写真 " width="200" height="133" /><7p> 


一 省略 一 
</div> 





1 段 組 で この 行 の 長 さ だ と 読み に くい が ( 左 )、2 段 組 に する と 読み や すく な る ( 右 ) 














間 寺 は 田舎 ( ゐ な か ) に 住ん で ゐる うち に 、 茎 を 一 匹 靖 ふ こと に し た 。 手 は 尾 の 長い 時 弄 だ つ 
た 。 綿 圭 は この 所 を 再び 出し て か ら 、 や つと 務 の 災 杏 だ け は 発 ( ま ぬか ) れ た こと を 甘 ん で の た 。 


半生 (は ん と し ) ば か り た つた 徐 (の ち ) 、 徹 革 は 東京 衝 る こと に な つた 。 鐘 村 苗 も 一 し よだつ 
た 。 し か し 厩 寺 は 東京 へ 柳 お と 、 い つか 蘭 が 前 の や うに 盟 を と ちら な い の に 気づき 出し た 。 「 ど うし 
た ん だ ら う ? 内 や 和香 (さしみ ) を 食 は せる か ら か し ら ? 【 ま 刻 本 で は 「?」 の 往 は 1 字 ア 

キキ] 」「 こ の 介 R さ ん が さき う 言っ て ゐ ま し た よぶ 。 人 は 者 の 生 を 師 え る と 、 だ ん だ ん 朋 を と ら な いや 


理 な 千 ( ゐ な か ) に 住ん で ゐる うち 
に 、 牙 を 一 本 ふ こと に し た 。 血性 の 長い 
時 本 だ つた 。 撤 等 は この 甘 を 句 び 出し て か 
ら 、 や つと 量 の 節 是 だ け は 入 (= ぬ か ) れ た 
こと を 講 ん で ゐ た 。 





半年 (は ん と し ) ぱか り た つた 彼 (の ち ) 、 


草 ( わ う ちゃ く ) を 依 み 出し た 。 が 、 そ れ は 
村 革 で は な か つた 。 表 は 目 に 見 えて 事 せ て 行 
さながら 、 活 (は) き 河 (だ ) あの 魚 (さか 
を な) の 侍 な ど を あさ つて ゐ た 。 「 つ まり 孝 会 
時 に な つた ん だ よ 。」 一 一 牙 は こん な こと を 
人 っ て 笑 つ たり し た 。 


その うち に 科 等 は も う 一 度 田 査 ( ゐ な か ) 
儲 ひ り を する こと に な っ た 。 け れ ど も 甘 は 不 相 
到 ( あ ひ か は ら ず ) 少し も 壁 を と ら な か つ 
た 。 夏 等 は と うと う 愛 株 (あい そ ) を つか 
し 、 所 の 到 い 女 中 に 言 ひつ け て 信和 を 山 の 中 へ 
球 て きせ て し まつ た 。 











一覧 穫 は そん な こと を 馬 し 含 つた 地 、 評 み に 舌 枯 る きせ る こと に し た 半 電 は 東京 へ 移る こと に な つた 。 接 和 代 も 一 
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次 に 、column-rule プロ パテ ィ で カラ 
ム と カラ ム の 間 に 区 切り 線 を 設定 し ま 
す 。 

1 column-rule プロ パテ ィ を 利用 する と 、 
column-rule-width ( 線 幅 )、column- 


す 。column-rule プロ パテ ィ の 値 に は 、 
半角 で スペ ー ス で 区 切っ て 各 プ ロ パ テ 


ィ の 値 を 指定 し ます 。 指 定 方 法 は 紅 廊 
の よう に な り ま す 。 


column-rule プロ パテ ィ の 基本 的 な 記述 





column-rule : 6px dotted #F60: 


~ 提 境界 線 の 色 
境界 線 の 幅 


rule-style ( 線 種 )、column-rule-color 境界 線 の 線 種 


( 色 ) を 一 括 で 指定 する こと が で きま 





人 

ここ で は Firefox、Chrome、Safari で 
表示 させ る た め に 、-moz-、-webkit- 
を 付け 足し た も の も 同じ よう に 記述 し 
ます 区 還 。 臣 胃 の よう に カラ ム の 間 に 


区 切り 線 が 加わ り 、 長 い 文 章 の 可読性 
が 上 が り ま す 。 


CSS で の 区 切り 線 の 指定 カラ ム 間 に 区 切り 線 が 引か れ た 





-dankumit 昌 
| 等 は 田舎 (あな か ) に 住ん で ある うち に 、 
一 臣 芋 ふ こ と に し た 。 工 は 尾 の 長い 業 殺 だ 
睦 こ の 下 を 抽 ひ 中 し て か ら 、 や っ と 
表 区 だけ は 先 ( ま 和 ぬか ) れ た こと を 講 ん で 
ト よ 
た 


ちや く ) を 個 み 出し た 。 が 、 そ れ は 栖 諾 で 
か つた 。 基 は 目 に 見 えて 療 せ て 行き な が ら . 
(は ) き 汰 (だ ) め の 魚 (さか な ) の 箇 な 
あさ つて ゐ た 。 「 つ まり 部 会 的 に な つた ん 
ュー 牙 は こん な こと を 言 つ て 笑 つた 





_-webkit-column-rule: 1px dotted 弁 ccc: 





-rule:1px dotted 弁 ccc: 








その うち に 披 等 は も う 一 厩 田 舎 (あな か 
ひ を する こと に な つた 。 け れ ど も 拓 は 不 相 
(あの か は ら ず ) 少し も 鹿 を と ら な か つた 
圭 は と うと う 愛 苦 (あい そ ) を つか し 、 気 
い 婦中 に 言 ひつ け て 久 を 山 の 中 へ 浅 て させ 
まっ た 。 








(ほん と し ) ば か り た つた 反 (のち) 、 牧 
| 京 へ 移る こと に な つた 。 物 講 付 も 一 し よ 
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CHAPTER 01 


column-gap で カラ ム 間 隔 を 調整 





9 区 記 column-gap プロ バテ ィ の 基本 的 な 記述 
Eo ] 

column-gap プロ バ パティ を 使っ て 、 カ | column-qdaD : 40px: | 

ラム 間 の 幅 を 決定 する こと が で きま す 。 | 2 | 

column-gap プロ パテ ィ の 値 に は 、 間 I ] 

隔 を 数 値 で 指定 する か 、 ま た は 

「normah を 指定 し ます 工 記 。 





(| 0D 臣 還 CSS で の カラ ム 間 の 距離 の 指定 カラ ム 間 の 距離 が 指定 され た 








-dankumit ー ョ 
ここ で は 葉 罰 の よう に 指定 し まし た 。 一 者 中 一 08901 ECS839。 CE 
Eva。 8 な つと Aeria、 
Firefox、Chrome、Safari で 表示 させ -webkit-column-gap:40px: 00 CCP CSA に お 
| ーーeh ん Spceihormrb レ 


る た め に 、-moz-、-webkit- を 付け 足 -moz-column-gap:40px:_ | 


し た も の も 同じ よう に 書き ます 。 こ れ column-9ap:40px: 。 ーー 
で 皿 記 の よう に カラ ム の 間隔 が 広がり RDG 





) | 

て ero た っ た (の 

ます mm へ こと に と っ し 
由 ーーーー 


まっ た 








その う 5 に 等 は も う 一 加 守 (なか) 
信和 を すま こと に な つた 、 けれど も 駐 は 
計 [ ま D か g ち マ ) 少し も 前 を と ら な か つ 
た 区 時 は と うと う 愛 (あいそ) を っ か 
し 、 の 下 い 人 中 に 斉 つ け て 全 を 山 の 呈 へ 





HH LE 





まとめ [CONCLUSION] 


column-count プ ロ パ ティ は みな の 和束 ・ 行 の 長 さ 7 PJ! が あり ます 。3 


く 、 使い や す ( ゆい りす ぎ な いよ う 優 先 


長い 文章 を 快適 ! 8 ンジ 3 選 ・ デザ イン に メリ ハリ を 出す こと が 重要 で す 。 
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ユー ザー 
イン ター フェ イス 


CSS だ け で 実装 する 横並び の プル ダウ ン メ ニュ ー 
あな に も スリ と を シル アル ニー レン ドス ノコ 

Ei に も コト の /NAwGd プ ヤス 和 を ま : ゴ ノ | あ ァ 4 = に コ 

ユー ザビ リティ に 配慮 し た 問い 合わ せ フ ォ ー ム 

ul 要素 で シン プル に 作る 縦 並び の プル ダウ ン メ ニュ ー 

= ピル に ブ ム で や マン ロニ レニ トン レノ | 

ユー ザビ リティ の 高い iPhone 風 UI フォ ー ム 

いで コン ルン シ ン た 四 は に に マリ ルレ ロー レニ ピン レス 

カス タム URL スキ ー ム と 文字 量 の 変化 に 対応 で きる リス ト 
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ルー レン スニ アァ た マエ と < 


CSS だ け で 実装 する 
横並び の プ ブル タダ ウン メニ ュー 





RE JavaScript を 使わ な く て も 、 CSS だ け で 
JITE SAMPLE >ormrreresrroreeeun 


作成 で きる プル ダウ ン メ ニュ ー を 紹介 し 
ます 。 

WebKit 系 の み の 対 応 と な り ま す が 、 する 
っ と 動く モー ショ ン も 付け る こと が で き 、 
「 軽 い の に リッ チ な 表現 」 が 可能 で す 。 


me ー 





制作 ・ 文 佐藤 と も 子 ・ サ チコ (螺旋 デザ イン ) 


制作 の ポイ ント 


ul 要素 と li 要素 を 使っ た マー クア ッ プ 
:hover の 応用 で メニ ュー を 作成 
transition で プル ダウ ン の 動き を 表現 


kon アル レル アル 
|IE | 15afari | 
| Firefox | | Chrome | 


※IE、Firefox で は transition に 非 対 応 。 


ボー ダー と 角 丸 の 表現 子 メ ニュ ー を コン テン ツ の 前 面 に 表示 
first-child と :last- 情報 商 5 を position と z-index を 
child を 利用 し て 、 メニ Neko Temporay Staffing 利用 し て 、 親 メニ ュー 


ュー 部 分 の 上 下 左右 に 
ボー ダー を つけ 、 左 端 
と 右端 だ け 角 丸 の 形状 
に し て いま す 。 


の 下 ・ コ ン テ ン ツ の 上 
に 表示 され る よう に 調 
整 し ます 。 


持ち 主 を 守る 石 と 言わ れ て いま す 。 主 | 
て 高 所 か ら 飛 び 降 り て みた りす る と 至 | 
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上 1 
メニ ュー の HTML は 、 親 の li の 中 に 子 
メニ ュー の ul が 入っ て いる 状態 で す 
。 
CSS が 適用 され な い 表示 で も 、 親 子 状 
態 が わか る よう に な っ て いま す 回 還 。 


CSS を 切っ て も 親子 関係 が わか る 














回 証 メニ ュー の 基礎 と な る HTML 





<ul id="itemMenu"> 


<li><a href に =" 二 ">Power Stone</a> 
<ul class="sub"> 


<i><a href="#>Lapis Lazuli</a><7(> 


<ti><a href-"#>The Philosopher's Stone</a></【> 


<li><a href 二 >Crystal</a><7> 





<li><a href="#">Cursed Gem</a></> 
<li><a href=" が っ Flying Stones</a></l> 
</ul></ ル > 

<li><a href="#">Cursed Items</a> 

<ul class="sub"> 

<li><a href="#>Cleveland</a></li> 


<li><a href="#">Charm</a></ll> 

<li><a href="#">Straw Man Set</a></ ル > 
<li><a href に ">Cursed 6em</a></ll> 
</ul></ll> 

<li><a href="#">Books</a></ ル > 

<li><a href="#">Magic Square</a></|> 


<li><a href="#">Neko</a></ ル > 


<li><a hre 和 た"#">Temporary staffing<7a><7ll> 


<7ul> 


メニ ュー の デザ イン を CSS で 作る 


則 


まず は プル ダウ ン の 見 た 目 だ け を 先 に 
作り まし ょ う 陳 。 子 メニ ュー と し て 
降り て くる 要素 は 今 の と ころ 了 邪魔 な の 
で 、 コ メン ト ア ウト し て お きま し ょ う 。 
親 メ ニュ ー の 構成 は 、 攻 主 の よう に な 


プル ダウ ン メ ニュ ー の 見 た 目 


RS SORA 


Lapls Lazuli 


The Phii s 
Stone 
Crystal 


Cursed Gem 


Fying Stones 





っ て いま す 。 ポ イン ト は 、ul に border 
な ど ロ ー ル オー バー 時 に 色 を 変え た い 
部 分 は 設定 し な いこ と で す 。 

また 、 レ イア ウト 上 は ul を 必ず し も ゃ 
float さ せる 必要 は あり ませ ん が 、 ここ 
で は 子 要素 の li に し っ か り と フィ ッ ト 
する よう に float:right: さ せ て いま す 


親 メ ニュ ー の 和 構成 


ul 


攻 還 。 こ の サイ ト の デザ イン で は 右 に 
揃っ て いる 要素 が 多い の で 、 数 ピク セ 
ル の ずれ が 出 た 場合 、 右 に float さ せる 
こと で 誤差 が わか り に くい よう に し て 
いま す 巧 。 
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CHAPTER 02 





ユー ザー イン ター フェ イス 

了 じ 語 員 を 右寄せ に する 左右 の レイ アウ ト を 比較 

pmainGontenitul#itemManuf 左側 は メニ ュー と 綻 の ライ ン を 感じ させ る 右側 は ログ イン ボタ ン な ど グ リッ ド を 感じ る 
font-weight:bold: オプ ジェ クト は あり ませ ん 。 デザ イン に な っ て いま す 。 





line-height: 1: 
こん ち g、 ゲ スト きん 
float:righti 


人 し ます 


SAMPELE た 2 トン ea 


font-family: Tahoma, Geneva, sans-serif: 





margin-bottom: 30px: 

border-radius:6px: 

/*text の 影 ------------------------- の 
text-shadow:Opx Opx 2px rgba(0,0,0.0.45): 





/*box の 影 ------------------ーーーーーー- 0 
box-shadow:1px 1px 3px rgba(0.0.0.0.4): | 
] 

作 買 [克則 | の 初期 状態 [ じ 記 | !i の 子 要素 の a に スタ イリ ング を 加え る 

#mainContent ul#itemMenu it #mainContent ul#itemMenuliat 

li に は 、float:left と メニ ュー の 横幅 の float:left: font-size: 12px: 

設定 だ けし て いま す 慌 還 。 そ の 子 要素 width: 130px: color: #666: 

の a に スタ イリ ング を し て いき ます } text-decoration: none: 

02-21 text-align:center: 





padding: 0.9em 0: 





グラ デー ショ ン と ボー ダー を ロー ルオ 


に 二 っ display:blocki 
ー バ ー で 切り 替え る 設定 を し て いき ま 


す 。 border-top:1px solid #AAA: 
border-bottom:1px solid #AAA: 
ー 閉 薫 
人 区 市 グラ デー ショ ン と ボー ダー の 指定 
) 


引き 続き 、a タ グ に ボタ ン の スタ イリ 
ング を し て いき ます 。 display:block に 
し て 、 グ ラ デ ー シ ョ ン の 指定 と 上 下 の rgb[255,255,255) 0%, 
ボー ダー を 指定 し ます 区 語 。 

これ が メニ ュー ボタ ン の アピ アラ ンス 

の 基本 に な り ま す 。 





border-top:1px solid #AAA: 


rgb[179,182,186] 70%, 


| rgbl169,173.184) 90%. 
rgbI244,245.246) 100% 





時 border-bottom:1px solid #AAA: 
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( CE 衣 :first-child と :last-child で 両端 に ボー ダー を 付け る 
則 じ る ) 




















弁 mainContent ul 大 temMenu li:first-child a{ #mainContent ul#itemMenu li:last-child a { 
メニ ュー の 左端 と 右端 を 角 丸 の 形状 に border-left:1px solid #AAA: border-right:1px solid #AAA: 
し て 、 ボ ー ダ ー を 両端 に 付け た い の で border-radius:6px 0 0 6px: border-radius: 0 6px 6px 0: 
回 還 、 :first-child と :last-child を 利 1 ) 
し て 設定 し て お きま す 七 廊 。 
[ 証 角 丸 と ボー ダー の 設定 
li:first-child a lia la li:last-child a 
ーー ee Dorder-top:1px solid #AAA: ee Dorder-top:1px solid #AAAi as、 





rgb[255,255,255] 0%. rgb[255.255.255] 0%, 





1 有 
明 
8 上 


| rgb(179.182.186] 70%, rgb[179.182.186) 70%, I 
暫 請 還 思 rgb(169.173.184] 90%, 線 rgb[169.173.184] 90%, | 
rgb244.245.246] 100% rgb[244.245,246) 100% プ | 
ーー border-bottom:1px solid #AAA: border-bottom:1px solid #AAA: = 
介 回 還 チ メ ニ ュー [ 語 ] 親 メ ニュ ー の スタ イル が 子 メ ニュ ー に 
UI LE 且 記 マン フル アイ トド で すか 長 員 な オジ ャ レク 影響 し て いる 


EL 記 記 フフ フル リイド で す が 芯 質 な オン ジャ レフ ツ ズ ぞ 


プル ダウ ン で 降り て くる 、 子 メニ ュー 
の CSS を 作り ます 攻 語 。 
で 付け て いた 、 HTML の コメ ント ア 














ウト を 削除 し まし ょ う 。 SO 
する と 、 親 メニ ュー 用 に 作っ た a 要 素 Ca 


の スタ イリ ング が 影響 し て いる は ず で Cursed Gem 
す 臣 盟 。 こ れ ら を 上 書き し て 変更 し ま Fying Stones 
し ょ う 回 還 。 





親 メ ニュ ー に よる スタ イリ ング の 影響 を 上 書き 


#mainContent ul 者 temMenu li ulsub it font-weight: normat 
float:none: background-image:none: 
} background-color: #FFF: 
#mainContent ul#itemMenu li ul.subliat text-shadow:none: 
font-size: 12px: border: none: 

Color: #752A5A: border-radius: 0: 
text-align:left: +} 


padding: 0.9em 10px: 
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CHAPTER 02 














さら に 、 子 メニ ュ の デザ イン を し 
ます 。 降り て くる メニ ュー が コン テン 
ツ (商品 紹介 ) の 下 に 表示 され な いよ 
し て 調 




















う 、position と z-index を 使 
整 し ます 区 還 。 

ul.sub ( 子 メ ニュ ー) だ け position 
:absolute で 指定 し て いる の は 、 ペー ジ 
の コン テン ツ に 影響 が 出 な いよ うに 、 
浮い た 状態 に し た いか ら で す 。 








MEM0 


position:absolute (絶対 位置 ) で の 位置 
指定 は 、 基 準 点 が どこ に な っ て いる の か 
意識 し て お く こ と が 大 事 で す 。 
特に 下 準備 を し て いな い 場 合 は html 要 
素 を 基準 に し ます 。 こ の 場合 、 今 回 の デ 
ザイ ン の よう に ペー ジ を 中 央 に 配置 する 
と ウィ ンド ウ の 横 サ イズ の 変動 に メニ ュ 
ー が つい て きま せん 。 

position:absolute に し た い 要 素 の 親 要素 
に position:relative (相対 位置 ) を 指定 
し て お く と 親 要素 を 基準 に 位置 が 指定 で 
きる よう に な り 、 親 要素 の 位置 が 別 の 要 
素 の 影響 を 受け て 移動 し て も 、 そ れ に 連 
動 す る の で 非常 に 便利 で す 。 








メニ ュー と コン テン ツ の 位置 関係 


FUL 





li positionzrelative: 


Z-index: 








-a position:relative: 
00: 

















contents 








子 メ ニュ ー の 位置 を 設定 する 


#mainContent ul#fitemMenu li{ 
ー 省略 一 - 
Position:relative: 

} 

#mainContent ul 者 temMenulia{ 
z-index: 100: 

position:relative: 


} 


ー 省略 一 


#mainContent ul 親 temMenui ulLsub { 
三 滴 本 

position:absolute: 

z-index: 10: 

一 省略 一 

} 


メニ ュー の 下 か ら 子 メニ ュー が 表示 さ 
れ た と き 、 子 メニ ュー の 一 部 が 親 メ ニ 
ュー の 背面 に 食い 込み 、 見 えな く な っ 


市 了 チ メ ニ ュー が 親 メ ニュ ー に 食い 込ん で いる 





て いま す 葉 還 。 こ れ は 、 子 メニ ュー を 
position:absolute で 設定 し て いる か ら 
で す 。top 方 向 に 、 リ スト の 高 さ 分 の 
値 を 入れ まし ょ う 。 

食い 込み は な く な り ま し た が 、 今度 は 


メニ ュー の 角 丸 部 分 に 隙間 が で き て いる 











The Phiosopher's 
Stone 


Charm 軒 


Straw Man Set 
Crystal 


Cursed Gem 





Cursed Gem 






Fing Stones 
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ME LE ブル ライ ト です が 人 な オシ ャ レダ ッ ズ 知 






Gevasnd 








The Phiosophers 
Stone 


Cham 





Straw Man Set 
Cystal 


Cursed Gem 










Cursed Gem 


Fyng Stones 





Flying Ston 


は じ め の メニ ュー の 角 丸 部 分 に 隙間 が 
で き て し まっ て いま す 皿 罰 。 

これ は 、top の 値 十 padding-top で 対 
応 し まし ょ う 回 語 。 


医 重 メニ ュー の 隙間 を な くす 


mainContent ulFtemMenu li uLsub 
ー 省略 一 - ーー 
top: 30px: ーー 
padding-top: 5pxi 

ョ 中 一 ーー 








09 


メニ ュー の 一 番 下 の 角 丸 も 、 子 メニ ュ 
ー の ul 要素 で 設定 し て お きま す 葬 証 。 
あと は 、 ロ ー ル オー バー の 色合い な ど 
を 調整 し ます 較 廊 。 

これ で 見 た 目 は 0K で す 。 





Internet Explorer で の 表示 を 


0 


IE8・IE? で の デザ イン は CS5S3 の 対応 
が まだ まだ な の で 、WebKit 系 や Firefox 
と 比べ る と 完全 な 表現 に な っ て いま せ 
ん 皿 語 。 

IE8 で は グラ デー ショ ン を filter を 利用 
し て 表現 し て いま す が 、 角 丸 は 再現 で 
きま せん 。 

IE す 9 で は グラ デー ショ ン の 表現 を あき 
ら め た 代わ り に 、 角 丸 が 表示 され た 状 
態 に な っ て いま す 。 グラデーション 部 
分 は ベ 夕 塗り に な っ て いま す 。 


メニ ュー の 一 番 下 の 角 丸 を 設定 


世 記 ロー ルオ ー バ ー の 色合い を 調整 





#mainContent ul#itemMenu li uLsub { 





position:absolute: 





才 mainContent ulWtemMenu li uLsub li 


a:hovert 





ァ -index: 10: 


background-image:none: 





font-size: 10px: 


background-color: #EBDEE7: 





top: 30px: 


border: none: 





padding-top: 5pxi 


H 





padding-bottom: 6Px: 
background: #FFF: 
border-radius:0 0 6px 6PX: 
] 














WebKit、IE8、IE9 で の 表示 の 違い 





WebKit IE8 











lapis Lazus Lapls LazuW 


The Phosopher's ds 
Stone 


Cystal Cmstal 
Cursed Gem 


Fyng Stones 














Th Phosopher's Cha 
Stone 


Cursed Germ 


Fng Stones 


IE9 











Power Stone U 
lapis Lazul de 


The Philosopher's Chz 
Stone 


Crystal 
Cursed Gem 


Fiying Stones 
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IE8 用 の filter で グラ デー ショ ン を 表示 
する に は 、 条 件 分 岐 を 利用 し て 専用 ス 
タイ ル シ ー ト を リン ク さ せま す 玉 語 。 
IE9 り 用 に グラ デー ショ ン の 代わ り に べ 
タ 塗 り を する 手法 は 、 ほ か の プラ ウザ 
用 に グラ デー ショ ン を 指定 し て いる 箇 
所 の 後に 、 グ ラ デ ー シ ョ ン の 中 で メイ 
ン に な る 色 を background-color で 指 
定 し て いま す 。 





IE8 対 応 の 条件 分 錠 





<l-tftteIE8I> 





<link re に "stylesheet" href="ie8.css” type="tex 


tcss" /> 





_<llendi--> 
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CHAPTER 02 


ユー ザー イン ター フェ イス 





アグ リル シス アル ンク き を 表現 する 





まず は 、 通 常時 は 子 メ ニュ ー が 非 表 示 
の 状態 で 、 親 メニ ュー に ロー ルオ ー バ 
ー す る と 子 メ ニュ ー が 表示 され る よう 
に し て み ま す 蓄 重 。 

通常 時 の ul に display:none を 付け て 、 
親 が :hover 状 態 の と き に display:block 
すれ ば 、 子 メニ ュー が 「 さ っ 」 と 表示 
され る 軽快 な 動き を 表現 で きま す 。 





子 メ ニュ ー を 表示 させ る 


_ 電 mainContent ul 才 temMenuliulLsub{t 


background: #FFF: 





display:none: 





position:absolute: 





z-index: 10: 





font-size: 10px: 


_ border-radius:0 0 6px 6pxi 
} ーー 

- mainContent ultemMenu li:hover 
ulLsub{( 








top:30pxx 。 ー _display:block: 。 
padding-top: 5Px: ! 軸 
padding-bottom: 6px: 
transition の 設定 
動き が 完了 する まで の 時 間 。 


子 メ ニュ ー が プル ダウ ン し て 表示 され 
る 際 の モー ショ ン を 、 さ ら に 追加 し て 
いき ます 。 

ここ で は 、 現 在 WebKit 系 の み の 対応 
と な り ま す が 、transition 効 果 を 使っ 
て 、 子 メニ ュー が 少し ゆっ くり と 降り 
て くる 動き を 表現 し ます 馬 還 。 
WebKit 系 以外 の プラ ウザ で は 、 
transition に よる 子 メ ニュ ー が ゆっ く 
り 現れ る 効果 が 表現 で き な い た め 、 普 
通 の 動き に な り ま す 。 


ミリ 秒 で 指定 。 
単位 を s に する と 秒 指定 に な る 。 


加速 度 の 付き 方 


ト 


-webkit-transition: opacity 200ms linear, top 200ms ease-in: | 


変化 させ た い プ ロ パ ティ 


コン マ 区 切り で 連続 し て 書く こと も 可能 | 


1 

残念 な こと に transition で は 、 い くつ 

か 扱え る プロ パテ ィ に 制限 が あり ます 。 
display プロ パテ ィ に は transition を 使 

っ て 動き を つけ る こと が で き な か っ 

た た め 、12 で 設定 し た ul 要素 を 
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display:none 一 display:block と し て 、 
ul の :hover 時 に 子 メ ニュ ー を 表示 する 
こと が で き な く な り ま し た 。 

また 、 こ こ で は メニ ュー 項目 の 増減 に 
柔軟 に 対応 で きる 作り に し た いた め 、 
height の 値 は 固定 し た 数 値 で 指定 せ ず 、 
height:inherit と し て いま す 。transition 





を 使っ て 、width と height の サイ ズ を 
変更 する こと は で きる の で す が 、 

height:inherit の よう に 数 値 を 指定 し な 
い 値 で は transition が 適用 され ませ ん 


『。 





MEMO 


Inherit は 親 要 素 の プロ バテ ィ 値 を 、 そ の まま 子 要素 に 継承 する こと を 表す 値 で す 。 inherit を 
使う こと で 、 通 常 は 親 要素 か ら 継承 し な い プ ロバ ティ の 値 を 継承 させ る こと が で きま す 。 








「 
1 
『 transition し な い 設定 と 、 す る 設定 
1 の Me 
| 0px 

ドー 


ら 
評 








01 | CS5 だ け で 実装 する 横並び の プル ダウ ン メ ニュ ー 

















inherit 
height: inheriti | 
width: inherit: 

130px 
height: 100pxi | 
width: 130px: | 














AMPLE ーーーーーmme 





この た め display:none 以外 の 方 法 で 、 

ul の 通常 時 に 子 メ ニュ ー を 隠し て お く 

こと に しじま す 。 こ こ で は 、 opacity と 
P margin を 、 transition に 利用 する こと 

に し まし た 。 

また 、 通 常時 の 子 メ ニュ ー を 隠す た め 


に 、width と height を 0 一 :hover 時 に 
inherit へ 切り 換え を 行う こと に し ます 
GE 

height の 値 の 調整 は 、 今 回 の 例 だ と 
transition に は 使え ませ ん で し た が 、 表 
示 ・ 非 表示 の 仕掛 け に は 利用 で きま し 
た 。 


opacity と marigin を 利用 する 
#mainContent ulWitemMenu li uLsub { 
height0: 
width: 0: 
overflow:hidden: 
cs 
top: 0: 
本 
opacity: 0.5: 
省 申 











1$ 

-webkit-transition の 値 は 、 カ ンマ 区 
切り で 複数 指定 で きま す 。 

変更 し た い プ ロ パ ティ と 、 変 化 に か か 
る 時 間 ・ 加 速度 の 付き 方 を 設定 し まし 
た 本 還 。 

これ で で き あ が り で す 。 


まとめ CONCLUSION] 


transition を 使っ た 表現 は 現時 点 で は WebKit し か 動き 
ませ ん が 、C55S3 の プロ パテ ィ の ひと つ な の で 、 ほ か メ 
応 し て いく で し ょ う 。 

プル ダウ ン メ ニュ ー を WebKit 系 に 対応 させ る 必要 が 
13 以降 の transition を 使っ た 部 分 は 


の プラ ウザ も 徐々 に 


な い の で あれ ば 、 


-webkit-transition の 値 の 設定 





#mainContent ulWitemMenu 和 uLsub { 


- 省略 一 





-webkit-transition: opacity 200ms linear, top 200ms ease-in: 





] 








実装 し な く て いい の で 、 
ニュ ー を デザ イン 通り に スタ イリ ング する の は 、 
味 で 手間 が か か り ま す 。 は じ め は 単純 な デザ イン か ら 
sz 反り お 





も っ と 早く 仕上 が る で し ょ う 。 
地 
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CHAPTER 02 
ユー ザー イン ター フェ イス 


邊 し 表示 内 容 を 切り 替え る 
> アル ニー レル ョ ンー ピス ソ た ミー 





Photo Gallery CS53 か ら 追 加 さ れ た 擬似 クラ ス :target 
を 利用 すれ ば 、 JavaScript を 使わ ず と も 
ナビ ゲー ショ ン を 操作 する こと が 可能 に 
な り ま す 。 

タプ ボタ ン 形 式 の シン プル な フォ ト ギ ャ 
ラリ ー を CSS で 実装 し て み ま し ょ う 。 


制作 ・ 文 山本 圭 助 
(株 式 会 社 ラ ナ デ ザ イン アソ シ エ イ ツ ) 





oO mW 1 や em 961968。 8 manic moton 9 9840u aoie er RuiioAa we rtm 時 コン テン ツ の 重ね 方 
mas. zehi yonde kudasai. kono text ha dammy text des. naiyo ha issai kannkei 由 
sitekudasai. yoroshiku onegai simas 麗 擬似 クラ ス :ta Td et の 使 し \ 方 
時 角 丸 タプ の 作り 方 





対応 ブラ ウザ 


IE E | 15afari 5 以上 | 


| Firefox 8 以 」 | | chrome >15 以 | 





※JavaScript 使 用 時 は IE6 か ら 対 応 (一 部 の 効果 に 


は 非 対 応 )。 
タプ と コン テン ツ を セッ ト で 扱う フェ ー ド 効果 を 有効 に 使う 
タプ と コン テン ツ を セッ ト し て 1 つの プロ ッ ク と し て 扱う こと タプ へ の マウ ス オ ー バ ー 時 と コン テン ツ の 切り 替え 時 に それ ぞ 
で 、 そ れ ぞ れ の 重なり と 位置 を まとめ て 指定 で きま す 。 れ フ ェ ー ド 処理 を 施し 、 効 果 的 に 演出 し ます 。 


photo-3 
photo-1 
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02 | 表示 内 容 を 切り 替え る タブ ナビ ゲー ショ ン の 実装 





ーー 


タプ と コン テン ツ を 1 セッ ト に し た ブ 
ロッ ク を 3 つ 用 意 し ます 人 回 語 。 
今回 は 、d【 要 素 (クラ ス 名 .page) を 
コン テ ナ と し 、 そ の 中 の dt 要素 (クラ 
ス 名 .tab) を タプ と し て 、dd 要 素 ( ク 
ラス 名 .content) を コン テン ツ エ リア 
と し て 使用 し ます 。 

タプ に あたる dt 要素 の 中 に a 要 素 を 作 
成 し 、 タ プ を 内 包 す る プロ ッ ク ヘ リン 
ク す る よう に し て お きま す 。 





ロ 











操 還 タプ と コン テン ツ の セッ ト 


<body> 


<dlid="page-1" class="page"> 
<dt class="tab"> 
< href="#page-1">page-1 タプ </a> 
</d> - 


<dd class="content"> 


page 1 コン テン ツ 
</dd> 
</d> 


<dl id="page-2" class="page"> 
<dt class="tab"> 


<q href="#page-2">page-2 タプ </a> 
_ de 
<dd class="content> 
Page 2 コン テン ツ 
dd> 。 
<d> 


<dlid="page-3" class="page"> 
一 省略 一 


<7d> 


</body> 





プ ブロック (L.page) の position を 
absolute に し 、 同 じ 場 所 に 重ね ます 
避 。 

タプ (.tab) と コン テン ツ (.content) 
も 同様 に 指定 し ます 工 諸 。 


プロ ッ ク を 同じ 場所 に 重ね る 


-Page { 
position: absolute: 


タプ と コン テン ツ を 同じ 場所 に 重ね る 


.tab { 
position: absolute: 
width: 100px: 
height: 40px: 
background-color: #666: 
} 


-content { 
position: absolute: 
top: 40Ppx: 
width: 460px: 
padding: 20px: 


各 プ ロッ ク ご と の タプ の 位置 を left で 、 
コン テン ツ の 重なり を z-index で 指定 
し ます 攻 還 。 

ー 番 左 の タプ が 一 番 上 に な る よう に 、 
値 を 指定 し ます 。 


タプ の 位置 と コン テン ツ の 重なり を 指定 する 


#page-1 .tab { 
left: 0: 
Z-index: 3: 

} 

#page-1 .content{ 
Z-index: 13: 


} 





#page-2.tabt 
left: 95px: 
Z-index: 2: 


} 


#page-2 .content { 
Z-index: 12: 


} 


#page-3 .tab { 

eft: 195px: 

ヶ -index: 1: 
RagSSdgogntent ーーー ニー 
Z-index: 11: 


} 
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CHAPTER 02 時 前 PE 
ュー ザー イン ター ラ ェ イネ スー 。。 。 。 。 ーー 
f 
擬似 クラ ス :target の 使い 方 
人 & :target の イメ ー ジ ド 
擬似 クラ ス :target と は 、 リ ンク 先 に 指 | | 2 | 
定 され た 要素 が 、 リ ンク か ら 呼 び 出さ | H 
れ た と き (ター ゲッ ト に され た と き ) H 


の スタ イル を 定義 むす る こと が で きる 擬 
似 ク ラス で す 区 還 。 
区 の 例 で は 、 リ ンク を クリ ッ ク す る 





























と 、 リ ンク 先 で ある div 要 素 の 背景 色 ] 
が 変更 され ます 。 

7htmt ot 

<a href="#box ツ > リン ク </a> background-color: 寿 f 作 

} 
<dvid-bor> リ ンク 先 dvy 。 Aokrettooo 
background-color: #999, 

が ess 思 
05 ' 
タプ (.tab) の ター ゲッ ト 先 を 自身 を 
内 包 す る プ ブロック (.page) に する こ 
と で 、 タ プ も 含め て スタ イル を 変更 で 
きる よう に な り ま すす 回 還 。 
盟 の よう に :target を 指定 する と 、 選 
択 し た タプ の コン テン ツ が 一 番手 前 に 
表示 され る よう に な り ま す 。 コジ ンク ジグ 





選択 し た タプ の コン テン ツ を 一 番手 前 に 表示 する 9 








_page:target .tab 中 





background-color: 弁 ccc: 





z-index: 1: 

9) 

-page:target .tab at 
color: #000: 

6 

.page:target .content { 




















z-index: 1: 


} 
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表示 内 容 を 切り 替え る タプ ナビ ゲー ショ ン の 実装 





| 角 丸 タプ を 実装 する 


タプ を 角 丸 に する 角 丸 の 指定 
-tab{ - 
タプ の 見 栄え た を それ らし くす る よう に 、 border-radius: 10px 10px 0 0: /..i10px 
上 端 を 角 丸 に し ます o } 
border-radius プロ パテ ィ の 指定 
border-radius を 使っ て 、 要 素 の 角 丸 を 指定 する border-radius の 省略 指定 の 例 
こと が で きま す 。 ac 0 5 委 成 SS 
"border-radius: 左上 右上 右 下 左下 :」 で 4 か 所 SNSFadiles 5px: すべ て の 角 を 半径 5px の カー プ に 指定 


それ ぞ れ を 指定 し ます が 、 省 略す る こと で 一 括 指 
定 す る こと も で きま す ぃ ) 。 値 の 指定 は 、px 以 外 に 


border-radius: 4px 8DX: 左上 と 右 下 を 4px、 右 上 と 左下 を 8px に 指定 








も em や % な ども 使用 で きま す 。 
タプ に 影 を 付け る 及 タ プ の 影 
.tab { 

タプ の 重なり が より わか りや すく な る box-shadow: 2px 0 2px rgba(0, 0. 0, 0.75): 
よう に 、 影 を 付け ます 紅 還 加 3。 } 

box-shadow プロ パテ ィ の 指定 

box-shadow を 使う と 、 要 素 の 影 を 指定 する こと box-shadow の 記述 例 

が で きま す 。 | 記 y 

Fr : 由 ] 

box-shadow: 水平 方 向 の 距離 垂直 方 向 の 距離 ぼ 要素 に 対し て 、 右 に 5px、 下 に 10px、 
か し 幅 拡散 幅 色 向き :」 で 各 値 を 指定 し ます 0 。 box-shadow: 5PX 10px 3Px #CCC: | ぼかし 幅 3px、 色 #ccc の 影 を 付け ます 


水平 距離 と 垂直 距離 以外 の 値 は 省略 可能 で す 。 
向き に inset を 指定 する と 、 要 素 の 内 向き に 影 が 
付き ます 。 
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CHAPTER 02 


ユー ザー イン ター フェ イズ 


レア ムリ リ トミ と る ソ アー だ ニン レン 


区 記 タプ と コン テン ツ エ リア に transition-duration を 指定 


.tab { 
タプ 切り 替え 時 の アニ メー ショ ン を 加 -webkit-transition-duration: 400ms: 
区 ます 。 -moz-transition-duration: 400ms: 
transition-duration で 時 間 を 指定 する 
と 、 値 が 変更 され る 際 に アニ メー ショ Me 


-webkit-transition-duration: 400ms: 


ン す る よう に な り ま す 。 タ プ と コン テ 
ン ツ エリ ア に 、 そ れ ぞ れ transition- 
duration を 指定 し ます 。 

transition プロ パテ ィ 関 係 は 、 ま だ ベ 
ンダ ー プ レフ ィ ッ クス が 必要 で す 。 


-moz-transition-duration: 400ms: 


} 


CS553 は まだ 最終 勧告 で は な いた め 、 un」 プラ ウザ ご と の ベン ダー プレ フィ ックス 


ee-1 一 部 の プロ バテ ィ は プラ ウザ ご と に ass= 
ベンダ ー プ レフ ィ ックス を 付け て 指 


定 する 必要 が あり ます ni。 Firefox -moz- 
Safari、Chrome 、 -webkit- 
Opera -0- 
Internet Explorer -ms- 


transition プロ パテ ィ の 指定 
transition は 、 要 素 の 値 を 変更 する 際 の アニ メー ショ ン (トラ ンジ ショ ン ) を 指定 する こと が で きま す ぃ 。 


| transition プロ パテ ィ の 要素 


適用 する プロ パテ ィ 名 を 指定 する こと で 、 ア ニメーション する プロ パテ ィ を 限定 する こと が で きま す 。 カ ン 
マ 区 切り で 複数 指定 も 可能 で す 


アニ メー ショ ン に か ける 時 間 を 指定 し ます 。 単 位 は s ( 秒 ) か ms (ミリ 秒 ) で 、0 の 場合 で も 単位 は 必 


transition-property 


要 で す 。 
に R カン マ 区 切り で 複数 指定 する こと で 、transition-property で 指定 し た 複数 プロ バ パティ それ ぞ れ の 時 間 を 
transition-duration 指定 する こと が で きま す 。 
transition-property で 指定 し た プロ パテ ィ 数 より 少な い 場 合 は 、 繰 り 返 し の 扱い に な り ま す 。 0z は 0 と 
同じ コー ド に な り ま す 


アニ メー ショ ン の 加速 や 減速 な どの イー ジン グ を 指定 し ます 。 


UNSIUG3UTRIOBSUUGNON ease が デフ ォ ル ト で 、 他 に linear、ease-in、ease-out、ease-in-out が あり ます 


transition-delay アニ メー ショ ン が 開始 され る まで の 待ち 時 間 を 指定 し ます 
> transition-duration の 時 間 指 定 が 、transition-property で 指定 し 」: transition-duration の 時 間 指定 が 、transition-property で 指定 し 
た プロ パテ ィ 数 より 少な い た プロ バテ ィ 数 と 同じ 
transition-property: opacity, left, top, height: transition-property: opacity, left, top, height: 
transition-duration: 35, 55: transition-duration: 3s, 55, 3s, 55: 
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02 | 表示 内 容 を 切り 替え る タプ ナビ ゲー ショ ン の 実装 


























' 人 ⑨ コン テン ツ エ リア に フェ ー ド 効果 を 加え る 
_ -content { 較 証 E 
コン テン ツ エ リア に opacity を 指定 す opacity: 0: _- 
る こと で 、 タ ブ 選 択 時 に コン テン ツ エ } 呈 
リア に フェ ー ド 効果 を 加え ます 民 廊 。 -page:target .content { 
opacity: 1: ーー 
} 





Internet Explorer へ の 対応 


| ) ]) 四 還 向け に JavaScript で 代用 
_$function0 【 回 - 
$(".page").each(function() { 








IE8 以下 で は 擬似 クラ ス :target に 対応 





し て いま せん の で 、JavaScript で 代用 


Var _this = this: 























し ます 。 $".tab a", this).click(function() { 
四 語 ] の 例 で は 、 jQuery 臣 罰 を 使用 し て SCicopten7JDide0: = 
Le SCcomtenr._is)show0: 
ー テ return false: ーー 
9: 
) ー 
): ーー 
jQuery 
http://jquery.com/ 


<!--[if lte IE 8]> 


_<script type="text/javascript" src="js/selectivizrjs"></script> 








まとめ [CONCLUSION] 


* JavaScript 6 
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ユー ザー イン ター フェ イス 


画像 を 使わ な いで 作る 
パン くす 型 の 購入 フロ ー 





EC サイ ト の 「 シ ョ ッ ピ ング カー ト 」 内 な 
Online Bookstore ど で よ く 見 られ る 、 パ ン く ず 型 の 購入 フ 
ロー を 制作 し ます 。 フ ロー の 画像 を 全 ペ 
ー ジ 分 用 意 する と 面倒 で す が 、CSS3 を 
こり 一 DEB 一 利用 する こと で 、 画 像 を 使わ ず に 美しい 
Chadosbok フロ ー を 完成 させ る こと が で きま す 。 


RSE 
SE 


no car 





制作 ・ 文 高村 香奈 子 (株 式 会 社 ア ー ク フィ リア ) 


制作 の ポイ ント 








Re て ma =。 ピ 時 transform:skew で 平行 四辺 形 を 描 
画す る 
HTC 上 慎 ::before と ::after を 利用 し て パー ツ を 
組み 合わ せる 
5 言 a 要 素 に 対し て ロー ルオ ー バ ー 時 の 
効果 を 指定 する 
Eo アル レル アル 
[IE PE ] [Safari M 5 以 E | 
| Firefox > 8 以 k 」 [chreme>1 16 以上 
同色 系 の グラ デー ショ ン を 使用 し た 表現 フロ ー 内 の 現在 地 を わか りや すく 可視 化 
な め ら か な 見 た 目 に な る よう に 、 同 色 系 の グラ デー ショ ン を 使 現在 地 の み 色 を 変え 、 現 在 地 を わか りや すく し て いま す 。 
し て いま す 。 





















Online Bookstore 





koo 


支払 い 方 法 の 選択 『 
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フロ ー 部 分 の ベー ス を 作る 


フロ ー 部 分 の HTML は ul で 記述 し ま 
す 。 フ ロー の 左 に 表示 させ た い 項 目 か 
ら 順 に 記述 し 、ul に は クラ ス bread を 、 
現在 地 と な る 項目 に は クラ ス current 
を 付与 し て お きま す 回 還 本 。 


ここ で の DOCTYPE は HTML5.0 を 使用 し 





フロ ー 部 分 の HTML 








<ul class="bread"> ー ーー 
<li><a href="#"> 利 用 規約 </a></li> 
<li><a href="#"> 購 入 者 情報 の 入力 </a></li> 
<li><a href="#> 配 送 先 の 入力 </a></l> 
<li class="current"><a href="#> 支 払い 方 法 の 選択 </a></li> 
<li><a hre="# っ 内 容 の ご 確認 </a>< 人 > 器 - 


_ ub 5 




















ul の 表示 


Online Bookstore 


New items て Category 3HI Company 





・ 到 用 規約 

・ 峰寺 情報 の 
・ 支払 い 方 法 の 選 
・ 内 容 の ご 条 朗 


| 以下 より お 支払 い 方 法 を 選択 し て くだ さい 。 


ニニ ーーーー: 








2 

li を float:left: で 横並び に し 、 高 さ を 
60px に 指定 し て お きま す 区 語 3。 
フロ ー の 三角 の 部 分 は 2 つの 図形 を 組 
み 合 わせ て 作る た め 、 高 さ の 数 値 は 偶 
数 に し て くだ さい ( 後 の ス テッ プ で 詳 
し く 解 説 し ます )。 





MEM0 | 


今回 は 、HTML5 の リセ ッ ト ・ ス タイ ル シ 
ー ト 「HTML5 Reset Stylesheet」 男 を 
別途 読み 込ま せ て いま す 。 


還 HTML5 Reset Stylesheet 


http://html5doctorcom/htmL- 
5-reset-stylesheet/ 




















overflow: hidden:_ 





ーー 
-bread li{ 
float: left: 











line-height: 60px: 
} 








l を 横並び に し た と ころ 







Online Bookstore 





Category 


用 昌 約 半 和 者 情報 の 入力 配 半 先 の 入力 支払 い 方 法 の 選択 内 容 の ご 潤 誠 


| 以下 より お 支払 い 方 法 を 選択 し て くだ さい 。 


トク タレ ジッ トカ ター や = る 


クレ ジッ トカ ー ド で の お 支払 い に つい て 
これ ほ は ダミ ー テ キス ト で す 。 ご 利用 い 





ジッ トカ ー 
ド は 以下 に な り ま す 。 こ ・ ご 利用 いた 


だ ける クレ ジッ トカ ー ド 








代金 引き 摘 え で の お 支払 い に つい て 
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CHAPTER 02 








ユー ザー イン ター フェ イス 


03 


a を ブロ ッ ク 要 素 に し 、padding や 文 
字 の スタ イル を 指定 し ます 葬 還 。 
次 に 、 背景 の gradient と text-shadow 
の 指定 を し 、 デ ィ テ ー ル を 作り 込ん で 
いき ます 。 

gradient は 、#EDEDED か ら #CCCCCC 
の 薄い グレ ー の グラ デー ショ ン に 設定 
し ます 。 ま た 、 そ れ ぞ れ の プラ ウザ 用 
に ベン ダー プレ フィ ックス を 付け る ほ 
か 、gradient 未 対応 の ブラ ウザ に 備え 
て background-color も 併記 し て お き 
ます 。 

text-shadow は 、 エ ン ボ ス の よう か な 効 
果 を 出す た め 、1px の 白い シャ ドウ を 
付け まし た 攻 田 。 


a 要 素 の スタ イル 
.bread tiat ーー 
display: block: 
float: lef: 
Ge: 040px 0 50px: 











Color: 弁 666666: 
text-dk -decoration: none: ーー 
た CS53 7 

background: --moz-tinear-gradient(teft #EDEDED, #CCCCCC): 
background: -webkit-linear- -gradienteft #EDEDED. #CCCCCC): 
background: -ms-linear-gradient(left, #EDEDED, #CCCCCC): 
background: linear-gradient(left, #EDEDED, #CCCCCCO 
filter: progid:DXImageTransform.Microsoft. gradient( startColorstr= #EDEDED', endColor 
str=#CCCCCC" ,GradientType= 1): 
_ background- -color: CCCCCC: 


text-shadow: 1px 1px 0 #FFFFFF: 
} 





























グラ デー ショ ン な ど を 指定 し た と ころ 


Online Bookstore 


ALT Category Special て ompany 





環 入 者 情報 の 入 怠 到 移入 評 払 い 方 法 の 攻 所 由夏 の ご 本 認 


| 以下 より お 支払 い 方 法 を 選択 し て くだ さい 。 


クレ ジッ トカ ー ド 3 








続い て 、 フ ロー 端 の 三角 の 部 分 を 描い 
て いき ます 。 


a の 擬似 要素 ::before と ::after に 対し 、 


要素 を 傾斜 変形 させ る transform:skew 
を 利用 し て 2 つの 平行 四辺 形 を 描き 、 
これ ら を 組み 合わ せ て 三角 の か た ち を 
つく り ま す 区 還 。 
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区 記 フロ ー を つく る た め の パ ー ツ の 構造 


bread lia a::before 
で デー" 
Z ア 
a::after 


i 払 い 方 法 を 選択 し て くだ さい 。 
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擬似 要素 ::before を プロ ッ ク 要 素 に し 、 
transform:skew(30deg): を 設定 し て 、 
傾斜 角度 が 30 度 の 平行 四辺 形 を 作り 
ます 。a の ボッ クス に 対し て 上 半分 に 
配置 する た め 、 マ イナ スマ ー ジ ン を 設 
定 し 、 位 置 を 合わ せま す 。 ま た 、 隣 の 
項目 と の 余白 を と る た め に 、#FFFFFF 
の border を 設定 し まし た 工 記 6 計 。 





MEM0 


擬似 要素 の 高 さ は 、li に 指定 し た 高 さ 
60px に 対し て 半分 の 30px に 設定 し ます 。 








a:ibefore の スタ イル 





-bread li a::before { 





_ display: block: 





width: 15px: 





height: 30px: 





border-right: 5px solid #FFFFFF: 





margin:0 -50px -30px auto: 





background-color: #CCCCCC: 





/ CSS3 7 





content: “の: 





-webkit-transform: skew(30deg): 





_-moz-transform: skew(30deg): 





transform: skew(30deg): 








上 半分 の 平行 四辺 形 











0@ 


請 と 同様 に 、 擬似 要素 ::after の スタ イ 
ル を 設定 し て いき ます 。 | 衣 の 平行 四辺 
形 と 逆 の か た ち に な る よう に 、 
transform:skew(-30deg): を 設定 し て 、 
傾斜 角度 が マイ ナス 30 度 の 平行 四辺 
形 を 作り ます 。 ま た 、a 要 素 の ボッ ク 
ス に 対し て 下 半 分 に 配置 する た め 、 こ 
ちら も マイ ナス マー ジン を 設定 し 、 位 
置 を 調整 し ます 区 語 。 


a::after の スタ イル 


Bbread liaafter { 





display: block: 
width: 15px: 








height: 30px: 





border-right: 5px solid #FFFFFF: 





margin:-30px -50px 0 auto 





background-color: #CCCCCC: 





/ CSS3 7 





content:" 





-webkit-transform: skew(-30deg): 





-moz-transform: skew(-30ded): 
transform: skew(-30deg): 











私 い 方 の 基 








07 

以上 で フロ ー の 三角 の 部 分 が で きま し 
た 。 上 下 そ れ ぞ れ の 平行 四辺 形 の 背景 
色 は 、a 要 素 の gradient の 終了 色 
#CCCCCC に 指定 する こと で 、a 要 素 
の ボッ クス と つなが っ た グラ デー ショ 
ン の よう に 見 せ て いる こと が ポイ ント 
で す 加 語 。 
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CHAPTER 02 


ユー ザー イン ター フェ イス 


現在 地 の 表 現 を 工夫 す 


0)@ C 証 現 在 地 の 表現 

次 に 、 ク ラス current を 付け て お いた Online Bookstore 

現在 地 の 表 現 を わか りや すく する た め 、 

背景 色 や 文字 色 な ど を オレ ンジ 色 ベ ー New items て Category Special Company 





ス に 変更 し て いき ます 功 一 。 


利用 愉 約 馬入 者 情報 の 入 方 





| | 以下 より お 支払 い 方 法 を 選択 し て くだ さい 。 





| クレ ジッ トカ ー ド ー ー 
09 じ 記 オ レン ジ 色 の グラ デー ショ ン 


文 字 色 を #FFFFFF、gradient を Online Bookstore 
#E69A4F か ら #BA4A0A の 線形 の グラ 
デー ショ ン に 設定 し ます 区 。 

text-shadow は 、 背 景 の グラ デー ショ 
ン よ り も 少し 濃い オレ ンジ 色 に 指定 し 
ま し た 功 暗 。 | 以下 より お 支払 い 方 法 を 選択 し て くだ さい 。 


Category EEHHI company 


王 入 者 情報 の 入力 


し タレ ジッ と カー は * 3 お 











現在 地 の ス タイ ル 


.bread li.current a { 
color: #FFFFFF 
が css ツ ーー 還 

、 background: -moz-linear-gradient(eft。 #E69A4F, #BA4A0A): 
background: -webkit-linear-gradient(left, #E69A4F, #BA4A0A): 
background: -ms-linear-gradient(left, #E69A4F, #BA4A0A): 
background: inear-radient(eft, #E69A4F, #BA4AOA): に 
filter: progid:DXImageTransform.Microsoft gradient( startColorstr=#E69AZF', endColorstr='#BA4ADA',GradientType=1 ): 
background-color:#BA4A0A: - _ 上 還 
text-shadow: 1px 1px 0 #BA4A0A: 

































































| 人 a::before と Sirafter の 間 表 色 ー 三角 の 部 分 の 背景 色 
-bread li.current a::before, 

三角 の 部 分 が グレ ー の まま な の で 、 .bread licurrent a::after 【 

gradient の 終了 色 で ある #BA4A0A に 、 Background-color: #BA4A0A: 

指定 し 、a 要 素 の ボッ クス と つなが っ } ーー 

た グラ デー ショ ン の よう な 処理 に し ま 

す 加 
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4 1 括 証 ロー ルオ ー バ ー 時 


続い て 、 フ ロー の 各 項 目 を ロー ルオ ー の Online'BookStore 
バー し た 時 の スタ イル を 設定 し て いき 
ます 。 画像 を 使用 し て いな い の で 、 


Category 




















gradient の 値 を 変え る だ け で 簡単 に ロ 用 了 入 者 伴 の 入力 
ー ル オー バー 時 の 効果 を 与え る こと が 
で き ま す 芽 凍 。 | 以下 より お 支払 い 方 法 を 選択 し て くだ さい 。 


クレジット ター ド 





2 








の ロー ルオ ー バ ー 時 の グラ デー シ 
ノ 


\ 





12 
| 
現在 地 以外 の 項目 に 対し て は 、 Online Bookstore 
#CCCCCC か ら #999999 の や や 濃い グ 
レー の グラ デー ショ ン を 設定 し ます 
本 還 。 背 景色 が 濃く な っ た の で 文字 色 
を #FFFFFF に し 、text-shadow も や 
や 濃い グレ ー の #999999 に 指定 し まし 
た 蓄 謙 。 


New items て stegory Speciai 


Company 





内 の ご 確認 





ロー ルオ ー バ ー 時 の スタ イル 


.bread liaihover{ 








、 color: 和 FFFFF 








WC5S3W′ 





background: -moz-tinear-gradient(eft #CCCCCC, 999999): 





background: -webkit-inear-gradienteft #CCCCCC,#999999。 





思 background: -ms-linear-gradient(left, #CCCCCC, #999999): 








_ background: linear-gradient(left, #CCCCCC, #999999): 





」 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#CCCCCC', endColorstr=#999999.GradientType=1 ) 


background-color:#799999: 
text-shadow: 1px 1px 0 #999999: 
































| の ロー ルオ ー バ ー 時 の 背景 色 
ご ) 5 
-bread li a:hover::before, 
三角 の 部 分 が ロー ルオ ー バ ー 前 の 色 の -bread li a:hover::after { 
まま な の で 、::before と ::after に 関し て background: #999999: 
も 、 痛 景色 を や や 濃い グレ ー の ] = 


#999999 に 指定 し て お きま す 話 還 華 思 。 


中 三角 の 部 分 の 背景 色 
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CHAPTER 02 





ユー ザー イン ター フェ イス 


| 上 ん ロー ルオ ー バ ー 時 の グラ デー ショ ン 
現在 地 の ロ ー ル オー バー 時 に 関し て も 、 Online Bookstore 

同じ よう に #CB6925 か ら #A03200 の 
や や 濃い オレ ンジ 色 の グラ デー ショ ン 
に 設定 し ます 。 文字 色 は 白 の まま で す 
が 、text-shadow を や や 濃い オレ ンジ 
色 に 指定 し まし た 本 玉 区 。 | 以下 より お 支払 い 方 法 を 選択 し て くだ さい 。 


クレ ジット タ ー ド 細 


New itemy Category Speciai て ompany 








上 【 ロー ルオ ー バ ー 時 の スタ イル 





_bread tcurrent aihovert 本 
た CS53 7 ーー 
、 backgrund: -moz-tnear-gradientleft WCB6925.A03200。 
background: -webkit-linear-gradient(left, #CB6925, #A03200): 
_ background: -ms-linear-gradient(left, #CB6925, #A03200): 

_ background: inear-gradient(left, #CB6925, #A03200): 生 4 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#CB6925', endColorstr=#A03200'.GradientType=1 ): 
background-color:#A03200: 
text-shadow: 1px 1px 0 #A03200: 









































4 還 ロー ルオ ー バ ー 時 の 背景 色 
で 
_-bread li.current a:hover::before, 
こち ら も 1 と 同じ く 、 三 角 の 部 分 が ロ -bread li.current a:hover::after 
ー ル オー バー 前 の 色 の まま な の で 、 background: #A03200, 


::before と ::after に 関し て も 、 背景 色 を 
#A03200 に 指定 し て お きま す 編 語 四 計 。 








和 @ クラ ス current を 移動 し た と ころ 
り 


以上 で 購入 フロ ー の 完成 で す 。 こ の ほ 
か の ペー ジ で は 、 ク ラス current の 位置 
を 付け 替え る こと で 、 現 在 地 を 簡単 に 
移動 させ る こと が で きま す 馬 還 。 Special Company 計 Shopping Cart 





入力 支払 い 方 法 の 選択 
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最低 限 の ユー ザビ リティ を 保つ に は 


本 作例 は 、 プ ログ レッ シ プ ・ エ ン ハ ンス メン ト の 考え を も と に 制作 し て filter を 記述 し 、IE8 で 閲覧 し た と ころ 
いま す 。 例 えば 、IE で は transform:skew が 未 対応 の た め 、 三角 の 部 分 
の 描画 は で きま せん が 、 グラ デー ショ ン 部 分 に filter (IE 独自 の 視覚 効果 
を 与え る プロ パテ ィ ) を 併記 する こと に より 、IE6 8 で も 再現 する こ 
と が 可能 で す 。 こ の た め 、 三 角 の 部 分 が 見 えな く て も 、 項 目 の 区 切り は 
認識 する こと が で きま す oi c:。 

また 、gradient だ け で な く 、 念 の た め background-color も 併記 し て お 
く こ と に より 、 グ ラ デ ー シ ョ ン 未 対応 の プラ ウザ で 見 た 際 も フロ ー の 形 
状 は 認識 する こと が で きま す の で 、 最 低 限 の ユー ザビ リティ は 保 た れ ま 
す 。 

IE を 含め た すべ て の プラ ウザ で 三角 の 部 分 を 描画 する 必要 が ある 場合 
は 、 別 途 画 像 に する か 、JavaScript の 使用 な ど を 検討 し て くだ さい 。 


Online Bookstore 








IE6 一 8 で filter 未 記述 の 場合 、 項目 の 区 切り が わか 
ら な く な っ て し まう 


Online Bookstore 








まとめ [CONcLUSION] 


フロ ー を CSS の み で 実装 する こと に より 、 文 字数 に 応 で す 。 
じ て 横 幅 を 自動 で 伸ばし た り 、 ロ ー ル オー パー の 処理 また 、 今 回 は 現在 地 以 外 の 項目 に 対し て 移動 が で きる 


も 簡単 に する こと が で きま し た 。 本 作例 は 購入 フロ ー よう に リン ク を 張っ て いま す が 、 リ ンク を させ た く な 
を 想定 し て 制作 し て いま す が 、 会 員 登録 画面 や パン < い 場 合 は 、a で は な く li に 対し て 各 ス タイ ル を 適用 する 
ず リ スト な ど 、 さ ま ざ ま な 用 途 で 利用 する こと が 可能 な どの 対応 を し て くだ さい 。 
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ユー ザー イン ター フェ イス 


ユー ザ ピ ビリ ティ に 配慮 し た 


問い 合わ せ フ ォ ー ム 


Example Company 


ゃ About us ECD2 で Access で Contact 


お 問い 合わ せ フ ォ ー ム 


サイ ト の URL 


お 問い 合わ せ 内 容 


操作 箇所 の イン タラ クシ ョ ン 


テキ スト 入力 欄 に カー ソル を 合わ せる と 、 わ ず か に 背景 色 が 付 
きま す 。 


お 問い 合わ せ フ ォ ー ム 


お 名 前 Example Name 


二話 番号 00-0900-0000 r 


ウェ ブサ イト の URL htp://example.com 


110 





テキ スト 入力 欄 や ボタ ン に カー ソル を 合 
わせ る と 色 が 変化 する こと で 、 現 在 操作 
し て いる 箇所 が わか りや すく な る フォ ー ム 
を つく り ま す 。CSS3 の transition を 使用 
し て 、 背 景色 や 影 を ゆっ くり と し た アニ メ 
ーション で 変化 させ る こと が ポイ ント で す 。 


制作 ・ 文 高村 香奈 子 (株 式 会 社 アー ク フ ィ リ ア ) 


時 transition で 背景 色 や 影 の 色 を ゆっ く 
り 変化 させ る 


置 box-shadow を 使っ た パー ツ の 加工 
置 border-radius で ボタ ン を 角 丸 に 


リア ルル ん 


IE  〉 PE.| [sae > 5 以上) 





[Frefex 〉 8 以上 ] [chreme 16 以上 | 


送信 ボタ ン の マウ ス オ ー バ ー 効 果 


送信 ボタ ン に カー ソル を 合わ せる と 、 発 光 し て いる よう な 効果 
に な り ま す 。 


! フォ ー ム の レイ アウ ト 
0 


DOCTYPE は HTML5.0 を 使用 し ます 。 
フォ ー ム の 該当 箇所 を form タグ で 因 
み 、label と input を セッ ト で 記述 し ま 
す 。 ま た 「 内 容 を 送信 する 」 ボ タン に 
は 、 他 の input 要素 と 区 別 す る た め 、 ク 
ラス submit を 付与 し て お きま す 回 語 
mg。 








まず 、 フ ォ ー ム の label と input、 も し 
く は textarea を 横並び に レイ アウ ト し 
て いき ます 。 それぞれ の 要素 の 幅 を 固 
定 し 、label に float:left: を 指定 し て 左 
側 に 回 り 込 ませ る こと で 、 横 並び に し 
ます 攻 還 。 





ロ 











フォ ー ム の HTML 


04 | ユー ザビ リティ に 配慮 し た 問い 合わ せ フ ォ ー ム 





<form> 





<label for="name"> お 名 前 </label> 





<input type="text" name="name" value=""/> 





<label for="email">E-Mail</label> 





<input type="email' name="email' value="" /> 





<label for="tel"> 電 話 番号 </label> 





<input type="tel" name="tel" value="" /> 





<label for="ur'> ウ ェ ブ サイ ト の URL</label> 








<input type="url' name=" ur value="" ん 
<label for="message"> お 問い 合わ せ 内 容 </label> 











<textarea name="message" rows="0" cols="0"></textarea> 








<input type="submit' value=" 内 容 を 送信 する " name="submit" class="submit" /> 





form> 


品 度 】 CSS 適用 前 








Example Company 





お 問い 合わ せ フ ォ ー ム 


1 ea = プ YY ト aue 





orre oeeeee oga ーー 

















Example Company 


で Abeot ov * Piiosopl 
5 <form> 
ーー 幅 700px 


層 暫 bel> <input>,<textarea> 
幅 150px 幅 450px 
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CHAPTER 02 

































































人 の ) 式 証 form の スタ イル 中 央 揃え に し た い 箇 所 
旨 form { | ーー ーー 
それ で は 実際 に 、 フ ォ ー ム 箇所 の CSS width:700px: | 9 | 
を 記述 し て いき ます 。<form> の 幅 は text-align: center: = nn | 
700px に 固定 し 、 最 終 的 に テキ スト 入 } | 
力 欄 と ボタ ン の レイ アウ ト を 中 央 に 揃 mn ニ | 
える た め に 、text-align:center: を 指定 | 
し て お きま す 攻 還 医 。 …ー | 
MEM0 
今回 は 、HTML5 の リセ ッ ト ・ ス タイ ル シ ー ト 「HTML5 Reset Styleshee 人 
団 を 別途 読み 込ま せ て いま す 。 | この 2 苗 所 を 一 本 Zr 補 
中 央 揃え に する 
較 HTML5 Reset Stylesheet ーー ーー ーー 
http://html5doctorcom/htmL5-reset-stylesheet/ 
人 /4 label の スタ イル 
U) 可 も 
label{ | 
次 に 、labet の スタ イル を 設定 し ます 。 width: 150px: 
こち ら は 幅 を 150px に 固定 し て 、 margin-top: 15Px: 
float:left: で 左側 に 回 り 込 ませ ます 。 floatt le 作 
margin や 文字 の スタ イル も 合わ せ て OONSRRUAH 
生 font-weight: bold: 
記述 し ます 了 還 。 
= Ca text-align: left 
} 
人 [ 則 abel の スタ イル 人 詩文 字 を 入力 し た と ころ 
ca inputtextarea { is - ム 
input と textarea に 対し て 、 基 本 的 な width: 450px: 還 と 
見 た 目 の ス タイ ル を 適用 し ます 全 還 。 border: 1px #DDDDDD sold: ee 
幅 を 450px に 固定 する こと で 、label と margin: 4px 0 20px 0: ーー 
横並び の レイ アウ ト に な り ま し た 。 ま 9Hng3UB23 ーー ーー 」 
た 、 テ キス ト を 入力 し た 際 の 文字 の 大 008PERPRRR ーー 2 
上 色 も ここ 定 0 font-size: 14Px: 人 
き さ や 色 も ここ で 指定 し ます 区 調 。 color: #666666: る 
(人 
MEM0 


入力 し た 文字 が 見 や すく な る よう 、 あ る 程度 の padding を 指定 し て お きま す 。 ま た 、 次 の ス 
テッ プ で テキ スト 入力 欄 に 影 を 付け る box-shadow を 指定 し ます が 、 未 対応 の プラ ウザ で も 
ユー ザビ リティ を 保つ た め に 、 併 せ て 1px の border を 指定 し て いま す 。 
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II 


ac O。 . 


ニス ーー と セン レス ント 


00@ 


続い て 、CSS3 を 記述 し て いき ます 。 テ 
キス ト 入 力 欄 の 周り に 影 を 付け る た め 
の box-shadow と 、 カ ー ソ ル を 合わ せ 
た 時 に 背景 色 を ゆっ くり と 変化 させ る 
た め の transition を 指定 し ます 工 証 。 


眉 証 影 と アニ メー ショ ン の 効果 
/ CSS3 7 





box-shadow の 値 は 、 "水平 方 向 の 距離 
垂直 方 向 の 距離 ぼかし の 距離 影 の 
色 」 の 順番 に 記述 し ます 。 今 回 は 、 
#CCCCCC の 薄い グレ ー の 影 を 付け ま 
し た 。 

transition の 値 は 、「 適 用 させ る プロ パ 
ティ 変化 する 秒 数 変化 の 仕方 」 の 順 








、 -webkit-box-shadow: 0 0 6px #CCCCCC: 
_-moz-box-shadow: 0 0 6px #CCCCCC: 


shadow: 0 0 6PX #CCCCCC: 

















_-webkit-transition: background 1s ease: 





-moz-transition: background 1s ease: 





_ transition: background 1s ease: 


] 











に 記述 を し ます 。 今回 は 背景 色 を 変化 
させ る の で 、 指 定 す る プロ パテ ィ は 
「background」 に な り ま す 。 変 化 の 仕 
方 は 、 開 始 と 終了 の タイ ミン グ が 滑ら 
か に な る 「ease」 を 1 秒 で 指定 し まし 
た 加盟 。 











記 ボッ クス の 影 


お 還 い 合わ せ フ ォ ー ム 
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テキ スト 入力 欄 の 見 た 目 が 大 ま か に で 
き て きま し た が 、「 お 問い 合わ せ 内 容 」 
の textarea に も う 少 し 高 さ が ほし い の 
で 、 textarea 単 体 に height を 指定 し て 
サイ ズ を 調整 し て お きま す 欧 呈 可 3。 


textarea の 高 さ 


textarea { 
height: 200px: 
} 


高 さ を 調整 し た と ころ 


お 問い 合わ せ フ ォ ー ム 








マウ ス オ ー バ ー 時 の 背景 色 を 変化 させ る 


0@ 


input と textarea の マウ ス オ ー バ ー 時 

に 対し て 、 薄 い ベ ー ジ ュ の 背景 色 

#EFEDE9 を 指定 し ます 。 入力 し た テ 

キス ト が 読み づら く な ら な いよ う 、 控 
え め な 色 に し まし ょ う 区 還 。 


工 記 マウ ス オ ー バ ー 時 の 背景 色 


Input: hover textarea: hovert 





background: #EFEDE9: 





} 
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CHAPTER 02 





ユー ザー イン ター フェ イス 


02 


以上 で 、input と textarea に マウ ス オ 
ー バ ー し た 際 に 、 背 景色 が ゆっ くり と 
変化 する よう に な り ま し た 攻 還 。 





背景 色 の 変化 
0 ーー 
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続い て 、「 内 容 を 送信 する 」 ボタ ン の 基 
本 的 な 見 た 目 の ス タイ ル を 設定 し ます 。 
まず input 要 素 に 指定 し て いた 回 り 込 





基本 の スタ イル 


基本 の スタ イル を 適用 し た と ころ 





inputsubmit( 計 





clear: both: 
width: 200px: 
border: none: 











内 容 を 送信 する 





み を clear:both: で 解除 し 、 ポ タン の 文 
字 の 大 き さ や 色 な ど を 指定 し ます 。 背 
景色 は #78846C の グリ ー ン に し まし 
た 町 還 還 罰 。 


margin: 10px auto 0 auto: 
background: #78846C: 
font-size: 16px: 











font-weight: bold: 
color: #FFFFFF: 
letter-spacing:0.1em: 
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CSS3 の border-radius で 送信 ポタ ン を 
角 丸 の 形状 に し ます 。 四隅 の 角 丸 の 半 
径 は 5px に 指定 し まし た 罰則 国 。 


四国 朋 丸 の 指定 


送信 ポタ ン の 角 丸 





/ css3 7 





-webkit-border-radius: 5px: 





-moz-border-radius: 5px: 





border-radius: 5px: 


内 容 を 送信 する 
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送信 ボタ ン は 現在 、 他 の input 要 素 と 
同様 に #CCCCCC の 薄い グレ ー の 影 が 
付い て いる 状態 で す が 、 マ ウス オー バ 


一 時 に この 影 と 背景 色 を 異な る 色 に 変 
化 さ せま し ょ う 。 

その た め 、 ア ニメーション させ た い 箇 
所 は 「background」 と 「box-shadow 
の 2 つ に な り ま す の で 、 適 用 させ る プ 


尼 記 アニ メー ショ ン の 効果 


ロ パ ティ に は 「background,box- 
shadow」 を 指定 し ます 。 こ の よう に 、 
カン マ で 区 切る こと で 特定 の プロ パテ 
ィ を 複数 指定 する こと が で きま す 
5]。 








-webkit-transition: background 1s ease. box-shadow 1s ease: 





-moz-transition: background 1s ease, box-shadow 1s ease: 





transition: background 15 ease, box-shadow 1s ease: 


} 
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マウ ス オ ー バ ー 時 の 送信 ボタ ン に 対し 
て 、 背景 色 と box-shadow を #A5B596 
の 薄い グリ ー ン に 指定 し ます 。 


マウ ス オ ー バ ー 時 の スタ イル 


input.submit:hover { 


box-shadow を 背景 色 と 同 じ グ リー ン 
に 変化 させ る こと で 、 ボ タン が 発光 し 
て いる よう か な 効果 に な り ま し た 。 ぼ か 
し の 距離 の 値 を マウ ス オ ー バ ー 前 より 
も 大 きめ に 設定 する と 、 発 光 の 効果 を 








より 強く 見 せる こと が で きま す 。 
最後 に 、 マ ウス オー バー 時 の カー ソル 
の 形状 が リン ク カ ー ソ ル の 形 に な る よ 








box-shadow: 0 0 20px #A5B596: 





background: #A5B596: 


cursor: Dointer: 





-webkit-box-shadow: 0 0 20px #A5B596: 





-moz-box-shadow: 0 0 20px #A5B596: 





14 

以上 で フォ ー ム の スタ イル は 完成 で す 。 
本 作例 は プロ グレ ッ シ プ ブ ・ エ ン ハ ンス 
メン ト の 考え 方 で 実装 を し て いる た め 、 
transition に 対応 し て いな い IE な どの 
プラ ウザ で 見 た 場合 は 、 マ ウス オー バ 
一 時 の ふわ っ と し た アニ メー ショ ン は 


適用 され ませ ん が 、 背 景色 の 変化 自体 
は 適用 され た 状態 と な り ま す 。 

同様 に 、box-shadow や border-radius 
の 効果 に 関し て も プラ ウザ に よっ て は 
適用 され ませ ん が 、 border や 背景 色 の 
指定 に より パー ツ の 形状 自体 は 確認 で 
きる た め 、 ユ ー ザ ビリ ティ は 保 た れ て 
いる と いえ ます 証 還 。 


IE8 で 表示 し た と ころ 











まとめ [CoNcLUSiON] 


フォ ー ム の イン ター フェ イス に さり げ な い イ ンタ ラク 
ユー ザー が 現在 操作 し て 机 
た り 、 単 調 な 入力 作業 の 
と らら れる よう に な り ま す 。 


ショ ン を 付け る こと で 、 
箇所 が わか りや すく 
作 が 快適 ( 


まし ょ う 。 


の みた だ ・<= コ 


で も 入力 時 の 補佐 的 な イン タラ クシ ョ ン で す の 
が 読み に くく な っ て し まう こと が な 
いよ うに 、 変 化 さ せる 背景 色 な ど は 控え め な も の に し 
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レン スニ シト と 


ul 要素 で シン プル に 作る 


縦 普 び の ブル タダ ウン メニ ュー 






マウ ス オ ー バ ー す る と サブ プ メ ニュ ー が 表 
示さ れる 縦 並 び の プル ダウ ン メ ニュ ー。 
ul 要素 で シン プル に マー クア ッ プ する こ 
Set と で 、 プ ブ プルダウン の 軽快 な 動き を 実現 し 
ーー まし た 。 ロ ー ル オー バー 時 の アク ショ ン 
や ボタ ン の 装飾 に つい て も 解説 し ます 。 


制作 ・ 文 中 西 祐介 
(株 式 会 社 ワ ン ・ ト ゥ ー・ テ ン ・ デ ザイ ン ) 


制作 の ポイ ント 


計 ul 要素 で シン プル な マー クア ッ プ 
時 li 要素 全体 を リン ク 範 囲 に 設定 


中 transition-duration プ ロ パ ティ で 
ロー ルオ ー バ ー 時 の 変化 を 表現 


[iE 。 >6 以 上 ] [sa >5 以 上 ] 
[Firefex 〉 4 以上 | [chrome 10 以上 | 


※IE6 … 8 は box-shadow、border-radius に 非 対 応 。 


CSS が オフ の 環境 化 で も 可読性 を 保持 box-shadow で ボタ ン に 光沢 を つけ る 





ul 要素 を 入れ 子 に し た シン プ 内 box-shadow プロ パテ ィ 

ル な マー クア ッ プ に より 、 人 を 使っ て メニ ュー ボタ ン 本 news 

CS5 が オフ に な っ た 環境 で も の 内 側 に 影 を つけ 、 光 沢 

プル ダウ ン メ ニュ ー が リス ト ーー 感 を 表現 し て いま す 。 誤 column 

と し て 表示 され 機能 を 失わ な 

いよ うに し て いま す 。 SerVice 
に 査 SuPPot 
otpa ay 廊 Contact 
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ベー ス の HTML を 作成 する 


【 


)1 


ここ で は 、 サ ンプ ル を HTML5 で 作成 
し て いま す が 、IE8 以 下 の 古 い ブ ラウ 
ザ は HTML5 に 対応 し て いま せん 。 

この た め 、「html5.js」 回 較 と い ぅ 
JavaScript フ ァイル を 読み 込む こと で 
IE6 8 に HTML5 の 要素 を 適用 で きる 
よう に し ます 。 回 廊 の よう に 入力 し 、 
Tscripts」 と いう フォ ル ダ に html5.js 


02 


次 に 、 ブ プラ ウザ に よっ て CSS の 各 要 素 
の デフ ォ ル ト 値 が 違う の を 揃え る た め 
に 、「html5reset-1.6.1.css、」 と いう フ 
ァイル を ダウ ン ロ ー ド し て 読み 込み ま 
す 横 還 。HTML フ ァイル で は 了 罰 の よ 
うに 記述 し まし た 。 





MEM0 | 


「content.css、」 は プル ダウ ン メ ニュ ー に 
つい て の 指定 を まとめ た CS5 フ ァイル で 
す 。 ペ ー ジ 全体 の レイ アウ ト の 大 枠 に つ | 
いて は 「default.css」 と いう ファ イル に | 
記述 し て いま す 。 こ こ で は 、CSS フ ァ イ | 
ル は すべ て 「styles」 フォ ル ダ に 格納 し て 、 
そこ か ら 読 み 込 ませ て いま す 。「ie6 7 
css」 と 「ie8.css」 に つい て は 後述 し ます 。 








ひし の ) 


0 
body の 中 の 基本 的 な 構成 は 工 還 の よ 
うに な っ て いま す 。 こ こま で で ペー ジ 
の 基本 的 な 構成 は 完成 で す 。 

aside 要素 の id="subContent" の 場所 
に 、 今 回 の メイ ン と な る 横並び の プル 
ダウ ン メ ニュ ー が 入り まず す 。 

次 の ステ ッ プ か ら 細 か く 説 明 し て いき 
ます 。 


) 
リ 





を 格納 し て お きま す 。 
<!--[if lte IE 8]> て <![endif--> で 囲っ 
て いる の は 条件 分 岐 コ メン ト で 、 


HTML5 に 対応 し て いな い IE8 以 下 で 
html5.js の ファ イル を 読み 込む よう に 
指示 し て いま す 。 





html5js 
http://html5shim.googlecode.com/svn/trunk/html5.js 


html5.js の 読み 込み (index.htmU) 


-<L-fflteIE8> まま 


<script src="./scripts/html5」js" type= "text/javascript"></script> 








<![endif--> 


html5reset-1.6.1.css 


http://code.google.com/p/html5resetcss/downloads/ 
detail2name=html5reset-1.6.1.css&can=2&q= 





CSS の 読み 込み (index.htmU 





<link re="stylesheet" href="./styles/html5reset-1.6.1.css" type='texVcss" > 









_<tink ret stylesheet' hre に "./styles/default.css" type="text/css" /> 











<link re に "stylesheet" hre= 


< に -[fIE 8]> 
<link re に "stylesheet" hre="./styles/ie8.css" type="text/css" /> 


"styles/content.css” type="texUcss" な 








<Iendi--> 


<--felE7> _ 
<link re に "stylesheet' href="./styles/ie6_7.css" type="text/css" /> 














<![endi--> 


body の 中 の 基本 的 な 構成 (index.htmU 








<div id="wrapper"> 


<aside id="subContent"> 











省略 // ここ が 横並び の ブル ダウ ン メ ニュ ー の 
<header id="header"> 場所 で す 
省略 





</header><!-- /#header --> 


7aside><!-- /##subContent --> 
</div><!-- /#content --> 





_<div id="content"> 


</div><!-- /#Wrapper --> 





<section id="mainContent"> 


<footer id="footer"> 





ー 省略 


貫一 





section><!-- /#mainConten --> 


footer><!-- / 才 ooter --> 
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CHAPTER 02 


ユー ザー イシ ター フェ イズ 

























































0& ul 要素 を 入れ 子 に する (index.htmU) 
ミニ = で 6 

ナビ ゲー ショ ン の マー クア ッ プ は 、 <ul id="menu"> ー p <li><a href に "大 >12<7a><7【> 

の よう に ul 要素 を 入れ 子 に し た <l><a href="# が >news<7a><7l> <li><a href=" 夫 ">11</a></(> 

シン プル な も の に な り ま す 。 <li><a href="#>column<7a> 。 <li><a href="#">10</a></li> 

正しく マー クア ッ プ する こと で 、 区 語 還 ニー SE 

の よう に CSS が オフ に な っ た 環境 で <li><a href="#">2012</a> <7(> 

0 g こなつ っ つた ュー 了 引 
<ul> </ul> 
1 示 な na 

も り ト と し て 表示 され 機能 を 失わ な <li><a href=" 夫 ">02<7a></l> <l> 

いよ うに し て いま す 。 <l><a href-"#>01</a><7l> = 。 。 一 益 四 
<u> <7u> 

CSS が オフ で も リス ト と し て 表示 され る <> naw 





<li><a href="# が っ 2011</a> 


MEMO My、 


マー クア ッ プ する 際 に 注意 すべ き 点 は ul 要素 を 入れ 子 に する や り 方 で す 。 園 の よう に li 
要素 の 外 で は な く 、 茹 の よう に 中 に 入れ る よう に し ます 。 












































e service 
o lineup ー ク アッ 2 ー ク アッ 
ma Saturday Night Footbal 国 間違っ た マー クア ッ プ 正しい マー クア ッ プ 
] mm Football Weekly 還 | 還 ま うう ーー 
| m Monthday Footbal ーー 
o catalog <l><a hre="##">menu01</a> 
mm Foothall Year ーー = 
m Football Month < ペ <uz ニー = 6 
= Footballdav <li><a href="#">menu01-01</a></li> <li><a hre 全 "#">menu01-01</a></ll> 
@ Suppot ーー ーー ー ー ー-ーーーーーー 一 
* contact menu01-02</a></l> <Ui><a href=" 二 >menu01-02</a><7ll> 
ー = <li><a href="#">menu01-03</a><7l> <li><a href=" 夫 ">menu01-03</a><7l> 
ul> ub 。 
<7ul> </l> 
ul> 











し た に セコ も ヨリ レネ 






































0 li 要素 全体 を が ボタン と し て 反応 させ る (content.css) 

ー ul#menu { っ 四 padding: 15px 15px 15px 30pxi 記 

次 に 、CSS で ナビ ゲー ショ ン の 装飾 を 、 width: 200px: color: #000: ーー 

し て いき ます 。 メニュー の 横幅 を 人 _- ーーーーー text-decoration: none: 二 5 

200px に 設定 し 、li 要素 の 中 の a 要 素 に Unendt ニー 

padding を 設定 する こと で Ii 要 素 全体 _position: Telative: ii background: Pe 

を ボタ ン と し て 反応 する よう に し ます font-size: 93%: - 還 #ff url(../images/common/nav_icon_01. 
こ 時 oe } 本 = gi⑪) no-repeat 10px centeri = 

回 品 。 MiddIn9 の 設定 を 図 で 示す と 、 umemutat 。 - 人 

還 3 の よう に な り ま す 。 ー edoeo ) 


padding の 設定 
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0@ 


IE6 て 8 で 表示 させ る た め 、ie6 7.css 
(IEe ~ 7 用 )、ie8.css(IE8 用) を 作成 


余白 と 幅 の 調整 (ie6_7.css) 






05 | ul 要素 で 


し て CSS を 上 書き 指定 し ます 区 還 。 ui 
要素 に display: inline: を 指定 する こと 
で Ii 要素 の 間 の 余白 を な くし ます 評 廊 。 
また 、width に 全体 の 横幅 (200px) か 


li 要 素 の 間 の 余白 を な くす 


ら 左 右 の padding で 指定 し て いる 幅 
(45px) を 引い た 155px を 指定 し ます 。 
こう する こと で 、1 要 素 全 体 が ボタ ン 
と し て 反応 する よう に し ます 。 





u#menuit 





display: inline: 


} 





_ulfmenu tiat 
width: 155px: 
ー 省略 - 
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本 neWS 査 neWS 

の 査 Column 
食 Column 

合 service 
本 SeTViOE 
ボタ ン の 表現 (content.css) 

ul#menuliat - 省略 
一 省略 一 } 


次 に 、border プロ パテ ィ と box-shadow 
プロ パテ ィ を 使っ て 、 ボ タン に 野 線 や 
光沢 を 加え ます 。 

さら に 、:hover で マウ ス が ポタ ン 上 に 
ある と き の 指 定 を し ます 。 こ こ で は 背 
景 を 白 に し て 、box-shadow プロ パテ 
ィ を な くし まし た 区 呈 区 3。 


背景 を 白 に する 





査 news 

















0@ 


box-shadow プロ パテ ィ は IE6 8 で 
対応 し て いな いた め 、 そ の まま 何 も 指 
定 し な いと 、 真 っ 白 な ナビ ゲー ショ ン 
に な り ま す 功 還 。 

IE6 ~ 8 で は 影 の 表現 は で き な く な り 
ます が 、 ポ ボタ ン と 認識 し や すい 最低 限 
の ロー ルオ ー バ ー は させ た い の で 、 
background プロ パテ ィ に 人 色 指 定 し て 
お きま す 臣 亡 








border-top: 1px solid #d2d2d2: 


ul#menu li a:hover{ 





_ box-shadow: none: 








border-left: 1px solid #d2d2d2: 





border-right: 1px solid #d2d2d2: 


background: 寿 作 url(./Images/common/ 
nav_icon_01.gif) no-repeat 10px center: 





box-shadow: 0 0 25px #d2d2d2 inset: 


} 








MEM0 


っ て いま す 。 


box-shadow プロ パテ ィ の 構文 





box-shadow プロ パテ ィ に inset を 指定 する と 、 要素 の 内 側 に 影 が 反映 され ます 。 こ れ に よ 
り 、 細 語 の よう な 光沢 の ある ボタ ン を 表現 する こと が 可能 で す 。 ま た 、 そ の 他 の 値 を 変更 
する だ け で いろ いろ な 表現 が 行え る よう に な り ま す 。box-shadow の 構文 は 男 の よ うに な 


box-shadow: 水平 方 向 垂直 方 向 ぼかし 距離 影 の 色 : 








IE6 ~ 8 で は 真っ 白 な 
ナビ ゲー ショ ン に な る 


背景 色 の 指定 (ie6_7.css) 








ul#menuliat 





本 news 





本 column 


background: #dcdcdc url(../images/common/nav_ 
icon_01.gif) no-repeat 10px center: 





} 





査 Service os 


二 SUPPOt 


背景 色 の 指定 (ie8.css) 





本 Contact 


ul#menulia{ 














background: #dcdcdc url(../images/common/nav_ 


icon_01.gif) no-repeat 10px center: 





} 
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CHAPTER 02 





0% 


次 に 、 ナ ビ ゲ ー シ ョ ン を 角 丸 の 形状 に 
し ます 。 擬似 クラ ス を 利用 し 、i 要 素 
の 最初 と 最後 の 子 要素 に 角 丸 を 
border-radius プロ パテ ィ で 適用 し ま 














す 還 還 。 
角 丸 を 取り 入れ る こと で ナビ ゲー ショ 
ン の ひと 固まり が より わか りや すく な 
り 、 見た目 の 柔 ら さ も 表現 で きま す 
CB。 




















ナビ ゲー ショ ン を 角 丸 の 形状 に 








border-bottom: 1px solid #d2d2d2: 





} 


u 才 menu lfirst-of-type >a{ 








-webkit-border-radius: 7px 7px 0 0: 





-moz-border-radius: 7px 7px 0 0: 





border-radius: 7px 7px 0 0: 
} 


ul#menu li:last-of-type > at 











-webkit-border-radius: 0 0 7px 7pxi 





-moz-bord 





adius: 0 0 7px 7pxi 





border-radius: 00 7px 7px: 


誤 Column 


衣 Suppot 


店 Contgct 























} 
MEMO MEMO 人 、 
医 還 で 使用 し て いる :last-child 擬似 クラ border-radius プロ バテ ィ は IE6 一 8 で 対応 還 IE6 ~ 8 で は 角 丸 が 反映 され な い 
ス は 、 指 定 し た 要素 内 で 最後 に 書か れ て し て いま せん が 、 角 丸 用 の JavaScript ラ イブ ーーー 
いる 子 要素 に スタ イル を 適用 する も の で ラリ を 読み 込む な どの 対策 は と っ て いま せん 。 
す 。 近似 クラ ス に つい て は IE6 ~- 8 で の 表示 は 園 の よう に な り ま す 。 oo 
INTRODUCTION の 18 ペー ジ も 参照 くだ 
さい 。 本 column 
本 5ervice 
5uPPot 
本 Contact 














メニ ュー に プル ダウ ン 機 能 を 実装 する 


display: none: で 非 表 示 に 、 マ ウス が 
li 要 素 上 に ある と き に は 、 非 表示 に し 
て いる ul 要素 を display: block: で 表示 
させ て いる も の で す 。 


そし て 、【 要 素 上 に hover し た と き ul 
要素 を 左 か ら 200px ず らし た 位置 に 表 
示さ せる こと で プル ダウ ン 機 能 を 実現 
し て いま す 四 思想 衣 。 


10 
次 に 、 メ ニュ ー に プル ダウ ン 機 能 を つ 
け て いき ます 。l 要 素 の 中 の ul 要素 を 


記 罰 プル ダウ ン の 表現 (content.css) 


ul#menu li:hover > ul { 


要素 を 左 か ら 200px ず ら す こと で プル ダウ ン メ ニュ ー を 実現 


Position: absolute: 




















ーー news 

display: block: top: 0: 

ー ー = FE ー 本 colpmn 

半 left: 200px: 
ul#menuult _ padding-left: 3px: き es 

width: 200px: font-size: 1089%: を support * cmsiog 全 Football Yesr 

display: none: } 

ーーーーーーーーーーーーーーーーー ーー ー ーーーー ーー 全 Contet 200px 食 Football Month 
200px 全 Football dey | 
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の 
| 1 

宮 に ある 「>」 の 子 セ レク タ は IE6 で は 
非 対 応 な の で 、 ナ ビ ゲ ー シ ョ ン の 基本 
的 な 構造 を 騙 剛 の JavaScript で 補い ま 


ie6Jjs 


jQueryfunction0( 


05 | ul 要素 で シン プル に 作る 縦 並び の ブル ダウ ン メ ニュ ー 


す (この .Jjs ファ イル は 筆者 が 書い た も 
の で す の で 、 自 由 に お 使い くだ さい )。 
ここ で や っ て いる こと は CSS と 同じ 
で 、1li 要 素 に hover し た 際 に 非 表 示 に 
し て いる ul 要素 を 表示 し て いま す 。 


回 ie6js の 読み 込み (index.htmU) 





jQuery に 依存 する 書き 方 な の で 、 こ の 
JavaScript の 前 に jQuery を 読み 込み ま 
す 駐 記 。<!--[if IE > て <llendi--> で 
囲っ て プラ ウザ が 、IE6 の と き に の み 読 
み 込 ませ る 設定 と し まし た 。 








<!--[if IE|> 





$(#menu ii.hoverunction0( 
Whis).childrenCul.show(: 





<script type="text/javascript" src="http://sjax.googleapis.com/ajax/libs/jquery/1 .7.1/jquery, 


min.js"></script> 





1.function0(_ 


<script src="./scripts/ie6.js" type="text/javascript"></script> 





$this).childrenCul).hide0: 


<Iendi-> 











次 に 、 メ ニュ ー ボ タン に ロー ルオ ー バ 
ー し た 際 、 ボ タン の 色 が ゆっ くり と 変 
化す る の を CS55 だ け で 表現 し ます 。 
ここ で は 、transition-duration プロ パ 


ティ で 変化 に か か る 時 間 を 指定 し て い 
ます 弁 罰 。 こ れ だ け で JavaScript を 使 
っ た よう な 効果 が 得 ら れ ま す 。 

た だ 、 現状 で は IE の すべ て の バー ジョ 
ン で この 効果 を 得る こと は で き な い た 
め 、 注 意 が 必要 で す 。 


変化 の 時 間 指定 (content.css) 
ufmenu lat 
省略 


webkit-transition-duration: 0.35: 











-moz-transition-duration: 0.35: 





transition-duration: 0.35: 








Firefox9 と IE6 で 表示 し て み ま す 。 大 
きく 違う の は 角 丸 と ボタ ン の 装飾 で す 。 
また 、Firefox で は リス ト の 間 に 余 白 が 
あり ます が 、IE で は あり ませ ん 駐 玉 
本 諫 。 IE で は マウ スポ イン タ が 余白 上 
に ある と き 、ul 上 に いな いと 判定 され 
プル ダウ ン が オフ に な り ま す 。ul 上 に 
いる と 判定 させ る た め に IE で は あえ 
て 余白 を つけ て いま せん 。 


まとめ CONCLUSION] 


今回 は で きる 限り IE6- 8 で も ブル ダウ ン メ ニュ ー6 
し て 機能 を 損なう こと が な いよ う 、 簡単 な ※ 
* ヽ て も わか る よ 


きま むだ た 。 た だ 、 13 を 


見 た 目 で は あり ませ ん 。 


Firefox9 で は 余白 が ある 


IE6 で は 余白 が な い 








ー | 


あー 


人 cotalog 


| 
| 
| 














レク ) 





角 丸 を 表現 する border-radius プロ パテ ィ や 、 変 化す 
時 間 を 指定 する transition-duration プ 日 
パテ ィ な ど は 表現 を 豊 
未 対応 プラ ウザ へ の 対 1 


し て くれ ます が 、 現 状 で は 
ら 使用 する どう か 
ます 。 
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ニン レン ン スニ アシ た エ と. 


ロー ルオ ー バ ー に よる 


ニー レル ンー ピス ルー 


ホワ イト カッ プ (2 個 セ ッ ト ) 


ソー サー 付き の スタ ンダ ー ド な コー ヒー カッ プ 


300cc 
直径 70mmx 高 き 100mm 


信 カー ト に 入れ る 
| この 商品 に つい て 問い 合わ せる 


会 社 概要 | お 支払 い 方 法 | 配送 に つい て | よく ある 質問 | 商品 一 臣 | 特定 商取引 決 に 基づく 表記 | プラ イ / 


copyrighte MagicarZakka. All Righte Reserved 


TECHNIC 1 
透明 度 を 変え る 

マウ ス が 乗っ た と き に 透明 度 を 変え る だ け で も 、 さ り げ な い ロ 
ー ル オー バー 効果 を 演出 する こと が で きま す 。 


3 


方法 
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ロー ルオ ー バ ー の 手法 は 背景 置換 や 
JavaScript ラ イブ ラリ を 使う な ど 、 さ ま 
ざま な アプ ロー チ が あり ます 。 今回 は 画 
像 を 使わ な い 、CSS3 を 利用 する 手法 を 
紹介 し ます 。 


制作 ・ 文 赤間 公太 郎 ( 株 式 会 社 マ ジ カ ル リ ミッ クス ) 


コン ル ルコ 


時 :hover 擬似 クラ ス を a 要 素 以外 に 使 
用 する 

時 opacity プロ パテ ィ を 使っ て 透明 度 を 
調整 する 

時 複雑 な グラ デー ショ ン に は ジェ ネ レ ー 
ター を 利用 する 


対応 ブラ ウザ 


IE > 6 以上 ] |Safari 〉 4 以上 | 


[Firefox 1 3 以上 | [chrome 12 以上 | 





グラ デー ショ ン を 設定 する 
グラ デー ショ ン を 設定 し 、 ロ ー ル オー バー 時 の 視覚 効果 を 高め 


る こと が で きま す 。 


個数 個 カー ト に 入れ る 








01 


ナビ ゲー ショ ン に ロー ルオ ー バ ー 効 果 
を 適用 し まし ょ う 。 

まず は 基本 と な る HTML を 用 意 し ます 
部 。 


02 

CSS で ナビ ゲー ショ ン ら し い レ イア ウ 
ト に 整え ます 区 還 攻 3。 

この と き 、a 要 素 に 対し て display: 
block: を 指定 し 、 さ ら に width と height 
も 指定 し ます 。 こ れ に より リン ク の 有 
効 エ リア が 、 指 定 し た 幅 と 高 さ の 全面 
に な り ま す 。 

テキ スト の 周り の 余白 部 分 も 、 リ ンク 
と し て クリ ッ ク で きる よう に し まし ょ 
う 。 


基本 と な る HTML 





<div id="naV"> 











> お 支払 い 方 法 </a></l> 





<li><a href=“"##> 配 送 に つい て </a></l> 





<li><a href=" 二 > 商品 一 覧 </a></li> 





<li><a href="#"> カ ー ト の 中 身 </a></l> 





< ul> 





</div> 





ナビ ゲー ショ ン を レイ アウ ト す る CSS 





_@charset "UTF-8': 








_body,h1.h2.h3.p.uLoLlidLdtdd { 











padding:0: 





} 





olL ult list-stylenonei } 





img t 





border: none: 





vertica-align:bottom 

















#nav ul { height: 35px} 





#nav ul li {float: left:] 





#navulliat 





display: block: 





Color: #e6e0da: 





background: ##6a5441: 





width: 200px: 





height: 35px: 





line-height: 35px: 





text-align: center: 








ナビ ゲー ショ ン ら し い レ イア ウト 


Zakkd 


Maeical 
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CHAPTER 02 


ユー ザー イン ター フェ イス 


03 


ロー ルオ ー バ ー 効 果 で 背景 色 を 変更 し 
ます 。 "マウ ス が 乗っ た と き " の 指定 は 
hover 擬 似 ク ラス を 使用 し ます 。 


hover 擬 似 ク ラス は 、 基 本 的 に a 要 素 回廊 (! 要 素 に 対し て hover を 適用 





に 対し て 使用 され ます が 、 今 回 は 極力 #nav ul li:hover { 





シン プル な HTML と CSS で 構成 する た } 





め に 、1l 要 素 に 対し て hover を 適用 し 
ます 回 還 。 





MEM0 


IE6 で は 、 a 要 素 以外 に hover を 設定 し て 
も 無視 され て し まい ます 。JavaScript ラ 
イプ ラリ 「IE9.js」 園 を 活用 し て 、a 要 素 
以外 に hover を 適用 で きる よう に し まし 
よう 。 

HTML フ ァイル の head 内 に ( を 追記 す 
る こと で 、IE8 以 下 の バ ー ジ ョ ン で スク 
リプ ト が 読み 込ま れ ま す 。 

IE7.js と IE8.js も あり ます が 、 最 新版 は 
IE9.js で す 。IE9.js は 、IE5.5 か ら IE8 ま 
で の HTML・CSS 表 示 を 、IE9 の よう に 
より WS3C 標 準 に 近い 形 で 再現 で きる ラ 
イプ ラリ で す 国 。 





国 ライ プラ リ "IE9.js』( サ イト 名 : ie7-js) 


http://code.google.com/p/ie7-js/ 


岡 IE9js の 読み 込み 





<r-tftIE9> 
<Script src="http://ie7-js.9ooglecode.com/svn/version/2.1(beta4)/IE9.js"></script> 
<![endif--> 








【 較 IE9js の 導入 に より 利用 で きる セレ クタ 一 覧 


http://ie7-js.googlecode.com/svn/test/index.html 





0@ 


opacity プロ パテ ィ を 使っ て ロー ルオ 
ー バ ー 効 果 を 適用 し ます 加 還 3。 
opacity は 要素 を 半 透 明 に する プロ パ 
ティ で す 。 

透明 度 を 半分 の 50% に し た いと き は 
opacity: 0.5: の よう に 指定 し ます 。 
IE 向け に は 、 独 自 プ ロ パ ティ の filter 
を 併用 し ます 。 opacity プロ パテ ィ と は 
数 値 の 指定 方 法 が 違う の で 注意 し まし 
よう 。 
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opacity お よび filter プ ロ パ ティ で 透明 度 を 指定 








#nav ul li:hover { 





opacity: 0.5: 
filter: alpha( opacity=50 ): 








} 





マウ ス を 乗せ る と ロー ルオ ー バ ー 効 果 が 現れ る 





Zakka 


Magical 





Oo Red シ リー ズ 


ホー ム > 新 商品 > ホワ イト カッ プ 





#nav ul li:hover { 





opacity: 0.5: 





filter: alpha( opacity=50 ): 





/* Firefox 7 
/* WebKit 7 


-moz-transition: 0.45: 





-webkit-transition: 0.45s: 





-o-transition: 0.4s: / Opera 7 





た W3C 7 


transition: 0.45: 





COE け MN 














00 人 問い 合わ せ の リン クボ タン 
1 <P class="contact-btn"><a href=" 二 > この 商品 に つい て 問い 合わ せ る </a></p> 呈 
* 次 は リン クボ タン に 対し て ロー ルオ ー 
バー 効果 を 適用 し て いき ます 。 


まず 、 問 い 合 わせ の リン クボ タン を 準 
備 し ます 。 了 還 の よう に p 要 素 と a 要 
素 で 構成 し た 、 シ ンプ ル な リン ク で す 。 




















0D@ 回 記 リン クボ タン の 見 た 目 を 整え る 

O ーー 
_ p.contact-btna{ _ 
CSS で リン クボ タン の 見 た 目 を 整え ま display: block: 

す す 3。 background: #faecd4: 

a 要 素 に display: block: を 指定 し て プ border: 1px solid #000: 

ロッ ク 化 し 、 リ ンク が 有効 な エリ ア を MONSOB6 

全面 と し まし た 。 ーー 





line-height: 40px: 





height: 40px: と line-height: 40px: の 
よう に height と line-height の 値 を 同 


text-align: center: 





font-size: 18px: 











じ 数 値 に する と 、 垂 直方 向 に セン タリ 。 font-weight: bold: 

ング する こと が で きま す 。 ) _- _- 
これ に border、background な ども 指 

定 し ます 。 見 た 目 を 整え た リン クボ タン 





、 この 商品 に つい て 問い 合わ せる 
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CHAPTER 02 


ユー ザー イン ター フェ イス 





= ピラ リル に 7A で コミ ミョン ル ッッ エン ルレ 








07 共 串 ロー ルオ ー バ ー 時 の 基本 的 な 背景 色 を 指定 


p.contact-btn aihover { background: #F9B445: } ーー 





ロー ルオ ー バ ー し た と き の 効 果 を グラ 
デー ショ ン に し て み ま し ょ う 。 

a 要 素 に hover 擬 似 ク ラス を 使用 し て 
CSS を 書い て いき ます 。 

グラ デー ショ ン は Iinear-gradient() 関 
数 を 使用 し ます が 、 サ ポー ト さ れ て い 
な い プ ラウ ザ も 視覚 的 に カバ ー す る た 
め 、 加 罰 の よう に 、 ま ず は ロー ルオ ー 
バー 時 の 基本 的 な 背景 色 を 指定 し て お 



















きま し ょ う 。 
0D@ 臣 廊 linear-gradient() 関数 に ベン ダー プレ フィ ックス を 付け る 

〇 ーー 
ー background: -moz-linear-gradient0,/* FF3.6+ 7 ー 
linear-gradient() 関数 は CSS3 の 草案 _background: -webkit-gradient0:/* Chrome.Safari4+ 7 
段階 で す が 、 各 ブラ ウザ は 拡張 機能 の background: -webkit-linear-gradien hrome10+,5afari5.1+ 8 
形 で 先行 実装 し て いま す 。 葬 還 の よう background: -o-linear-gradient(): /* Opera 11.10+ gr 間 是 日 
に 、 ベ ンダ ー プ レフ ィ ッ クス を 付け ま _background: -ms-linear-gradient0:/* IE10+*/ 
本 当 あ background: linear-gradient0: /* W3C */ 

e 


Chrome、Safari の 古い バー ジョ ン で 
は 、 記 述 方 法 が 若干 異な る た め 、 注 意 
が 必要 で す 。 


人 D ⑨ Ultimate CSS Gradient Generator 

E 義和 http://www.colorzilla.com/gradient-editor/ 

Inear-d「adlen 記 迎 力 : 』 
干 複雑 で 、 手 書き に よる コー ド は 作業 
効率 が 悪い た め 、 オ ン ラ イン の ジェ ネ 
ス が 多い で す 。 

特に 複数 の 色 を 指定 し た り 、 適 用 範囲 

が 細か いい グラデーション を 作成 する 場 

合 に 便利 で す 。 基 本 的 に は マウ ス 操 作 

で グラ デー ショ ン の プロ パテ ィ を 生成 
する こと が で きま す 加 罰 。 

さら に 、IE6 に も 対応 する filter プロ パ 
ティ も 生成 され る た め 、 ほ ぼ す べ て の 
プラ ウザ で グラ デー ショ ン を 表現 する 
こと が で きま す 。 


Ultimate CSS Gradient Generator で グラ デー ショ ン を 作成 
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SS Ao 


0 


史 の 「UUtimate CSS Gradient 
Generator」 を 利用 し て グラ デー ショ 
ン を 作成 し て み ま し ょ う 。 

まず 色 を 設定 し た い グ ラ デ ー シ ョ ンス 
ライ ダー を クリ ッ ク し ます 。 次 に すぐ 
下 の 「Stops」 内 に ある 「Color:」 を ク 
リッ ク し ます 訪 還 。 す る と カラ ー ピ ッ 
カー 皿 記 が 現れ る の で 、 好 き な 色 に 設 
定 し ます 。 

イン ター フェ イス や 設定 方 法 は 





06 | ロー ルオ ー バ ー に よる ナビ ゲー ショ ン の 演出 


Photoshop な ど に 近い の で 、 グ ラフ ィ 
ッ ク ソ フト で 設定 し て いる よう な 操作 
性 で す 。 

今回 は 白 か ら オレ ンジ に 変わ る グラ デ 


1. ス ライ ダー を クリ ッ ク 


opsc:| 還 Loeen[ 隊 Pe 
Coloc Locaton: ioo% ee 
2. カ ラー を クリ ッ ク 





ーション を 設定 する た め 、 開 始 位置 の 
カラ ー を #FFFFFF、 終 了 位 置 の カラ 
ー を #FF8C00 と し まし た 。 











ジェ ネ レ ー タ ー で 生成 され た コー ド 

四国 を コピ ビー し 、CSS ファ イル に 貼り 

付け ます 。 

「ULtimate CSS Gradient Generator」 

で は 、Firefox、Chrome、Safari、0pera、 
IE6 ~ 9、IE10、W3C 標 準 を 網羅 し た 

コー ド が 生成 され ます 玉田 。 


ジェ ネ レ ー タ ー で 生成 され た コー ド 


_p-contact-btn a:hover { 





background: 巡 9B445:/* Old browsers ツ 7 ー es 
background: -moz-linear-gradient(top, 者 fff 0%, #ff8c00 100%): /* FF3.6+ 只 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), 





color-stop(100%,#ff8c00)): /* Chrome,Safari4+ */ 





background: -webkit-linear-gradient(top, #ffffff 0%,#ff8c00 100%): /* 


Chrome10+,Safari5.1+ */ 





background: -o-linear-gradient(top, #ffffff 096.# 作 8c00 100%): /* 0pera 11.10+ 7 





background: -ms-linear-gradient(top, #fff 096.#ff8c00 100%): / IE10+ */ 


background: linear-gradient(top, #ffffff 0%#ff8c00 100%): / た WSC 7 








fiter: progid:DXImageTransform.Microsoft.gradient( startColorstr=# 人 fff, endColorstr=" 


#ff8c00'.GradientType=0 ): /* IE6-9 7 





四 良 グラ デー ショ ン が 表現 され た リン クボ タン 








まとめ [CONCLUSION] 


マウ ス を 乗せ た と き 、 透 明度 を 少し 変化 させ る だ け で 
も 視覚 効果 が ある の で ロー ルオ ー バ パー 効果 と し て 活用 
で きま す 。 透 明 に な っ た と き 、 背 景 の 色 で 「 明 る く 」、 
[暗く 」 な ど が 工夫 で きま す の で 、 親 要素 の 硝 景色 を イ 


ロイ ロロ 指定 し て みる の も よい で し ょ う 。 で す 。 


グラ デー ショ ン の コー ド を 作成 する 際 に は 、 オ ン ラ イ 
ンジ ェ ネ レー ター を 活用 する と 便利 で 

手打 ち で は と う て い 書き 切れ な いよ うな 、 細 か い 設 定 
と クロ スプ ラウ ザ 対 応 の コー ド が カン タン に 生成 可能 
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に て ニン ニス を と パニ ニテ だこ と 


ユー ザビ ピリ ティ の 高い 
iPhone 風 UI フォ ー ム 


画 申 し 込み フォ ー ム 
: お 申し 込み は こち ら か ら お ね が いし ます 。 








メー ル マ ガ ジン の 購読 


メー ル マ ガ ジン の 形式 
ES 
テキ スト 





PHA 


iPhone ライ ク な UI を 作成 する 





スマ ー ト フォ ン サ イト の 入力 フォ ー ム は 、 
プ ブラ ウザ の デフ ォ ル ト で 用 意 さ れ て いる 
も の その まま で は 、 使 いや すさ に 難 が あ 
り ま す 。C5S53 を 使っ て iPhone の アプ リ 
の よう な フォ ー ム を 実装 し 、 ユ ー ザ ー の 
使い 勝手 を 向上 させ まし ょ う 。 


制作 ・ 文 ノ 執 行 大 介 


制作 の ポイ ント 
時 「-webkit-appearance:none:」 に よ 


る フォ ー ム の ノー マラ イズ (初期 化 ) 
時 擬似 要素 セレ クタ :checked と 
transition プロ パテ ィ に よる 表示 の 切 
り 替 え 
計 ア イコ ン な ど は 無理 に CS53 に よる 表 
現 を 使わ ず 、 画 像 を 用 いる 


[ios ) 3.0 以 上 | 


|Andreid 3 2 1 以上 」 


※Android は 一 部 対応 し て いな い 機 種 が あり ます 。 


入力 内 容 の クリ アボ タン を 用 意 する 








フォ ー ム の 各 要 素 は プラ ウザ の 初期 の 表示 を 使わ ず 、 ユ ー ザ 
が 使い 慣れ た iPhone ライ ク な UI を 作成 し ます 。 


Yes の 


メー ル マ ガ ジン の 購読 


メー ル マ ガ ジン の 形式 
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テキ スト フィ ー ル ド の 入力 内 容 を クリ ア で きる ボタ ン @ を 用 意 
する こと で 、 ユ ー ザ ー の 使い や すさ を 向上 させ ます 。 


お 名 前 








ジリ ガチ ナ 








ーー 


き 


ーー 


で 





07 | ユー ザビ リティ の 高い iPhone 風 UI フォ ー ム 





人 M1 回 杉 の よう に 記述 し て いき ます 。 ま ず 力 例 な ど を 記述 し まし ょ う 。 ま た 。 
は 名 前 な どの テキ スト フィ ー ル ド を 作 input タ グ の 後に anchor タ グ (以下 a 


最初 に フォ ー ム の HTML に と りか か り 


り 、 要 素 に 「placeholder="…"」 を 入 タグ ) を 記述 し ます 。 これが 入力 内 容 


ます 。 回 還 の コー ド の form タグ 内 に 力 す る こと で テキ スト フィ ー ル ド に 入 を クリ ア す る た め の ボ タン に な り ま す 。 


ベー ス と な る HTML (index.htmU 





</header> 





<html lang 








<head> 


<article class="mainArticle"> 





_<meta charset="UTF-8"> 





<title> ス マー ト フ ォ ン サイ ト で よく 使う 便利 な UI フォ ー ム </title> 


<section class="mainHead"> 





_ <meta name="keywords" content=""> 





<h1> 画 申し 込み フォ ー ム </h1> 








<meta name="description" content=" 





<p> 申 し 込み は こち ら か ら お ね が いし ます 。</p> 





<7section> 





<link re に "index" hre="7"> 





<section class="mainSec"> 








<meta name="format-detection" content="telephone=no"> 





<form actio」 > 








<meta name="viewport" content="width=device-width, user- 
scalable=yes, initial-scale=1 maximum-scale=1"/> 


// ここ に 回 諫 の 内 容 を 記述 





form> 





<meta name="apple-mobile-web-app-capable" content="yes"> 





<!-- / .mainSec --></section> 





"stylesheet' href="css/common.css"> 





<lUink re 


<!-- / mainArticle --></article> 





<Uink re="stylesheet" href="css/form.css"> 




















</head> <footer class="globalFooter'> 
<P class="copyringht">Studio Panda Space</p> _ 
<body> 中 = <!-- / .globalFooter --></footer> 
<header> </body> 
<h1 class="globalHeaderLogo"><img src="images/no1_logo.png" </htm> 


alt="Studio Panda Space"></h1> 








[ 屋 】 index.html の form タグ 内 に 記述 する 内 容 





<h2 class="checkTitle'> お 名 前 <7h2> 





<P clas: 





"formText'><input class="name" type="text" placeholder=" 例 ) 日 本 太郎 " value="“><a class="inputTextCL" href="#">x</a></p> 








<h2 class="checkTitle'> フ リガ ナ </h2> 





<P class='formText"><label><input class="furi" type="text" placeholder=" 例 ) ニホン タロ ウ " value="“><a class="inputTextCL" href="##">x</a> 


</labe></p> 








<h2 class="checkTitle"> メ ー ル アド レス </h2> 





<P class='formText"><label><input class="address" type="email" placeholder=" 例 ) taro@panda-space.com" value="“"><a class="inputTextCL" 


href-"#">x</a></label></p> 














MEM0 ー- 


この サン プル で は 、2 つ の CSS フ ァイル を 読み 込ん で いま す 。「common. 
css」 は 全般 的 な スタ イル の 設定 、「form.css」 は 個別 要素 に 対す る スタ イ 
ル の 設定 を 行っ て いま す が 、 本 書 で は 「form.css」 の 内 容 だ け を 解説 し ます 。 
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CHAPTER 02 





ユー ザー イン ター フェ イス 


テキ スト フィ ー ル ド を 実装 する 


02 


次 に CSS を 別 フ ァイル に 記述 し ます 。 
「common.css」 は 一 般 的 な スマ ー ト フ 
ォ ン サイ ト の 設定 で す が 、iPhone4 以 
降 の Retina デ ィ ス プレ イ 対 応 の た め 
「img」 要 素 に 「zoom: .5:」 を 指定 し 


テキ スト フィ ー ル ド の スタ イル ① (form.css) 


inputlype='text', inputtype='emaiU1t 


て いま す 。 次 は 「form.css」 攻 還 で フ 
ォ ー ム の 装飾 を 行い ます 。 

まず は テキ スト フィ ー ル ド を 
「-webkit-appearance:none:」 で 初期 
化し ます 。 さ ら に 「display:block:」 で 
プ ブロッ ク 要 素 に し 、 パ ディ ング と 幅 を 
指定 し て テキ スト フィ ー ル ド の 大 き さ 





/ テ キス ト フ ィ ー ル ド の 初期 化 


を 決め ます 。 ま た 、i05 / Android 端 
未 を 横 に 傾け て 画面 の 幅 が 変化 し た 場 
合 も 、 左 右 の padding を 一 定 に する た 
め 、「box-sizing: border-box,:」 を 指定 
し まし た 。 





ー/ ボ ックス に padding を 含め な いよ うに する ツ 








_ -webkit-appearance:none: 





-webkit-box-sizing: border-box: 





box-sizing: border-box: 





、 /* 大 き さ を 決め る ツ 








display:block: 
__Baddingi が px.4P5 
width:100%6: 


省略 ( 締 と 記 で 解説 ) 
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次 に 、 フ ォ ン ト サ イ ズ な ど を 指定 し 、 
「box-shadow: inset …」 で 内 側 の 影 を 
つけ ます 工 還 。 影 の 数 値 指定 は 通常 の 
「box-shadow」 と 同じ で す が 、 そ の 前 
に 「inset」 を つけ る こと で 影 が 内 向き 
に な り ま す 。 





テキ スト フィ ー ル ド の スタ イル ② (form.css) 


inputltype=*texY"],inputltype="emaiP]( 


省略 ( 章 で 解説 ) 








フォント サ イズ と 行 の 高 さ を 指定 








_font-size:16pxi 
_ lne-height:1 -2em: 











/* 内 側 の 影 を つけ る ツ 7 





-webkit-box-shadow: inset 1px 1px 3px rgba(0.0.0, 0.4): 


box-shadow: inset 1px 1px 3px rgba(0,0. 0 04: 








省略 ( 仙 で 解説 ) 一 


ら に 「border-radius」 で 角 丸 を 指 
し 、 外 側 に ボー ダー を つけ ます 区 還 。 
回 は 四辺 が すべ て 同じ 値 で よい の で 、 
指定 する 数 値 は 1 つ で 済み ます 。 





聞 同 K 
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テキ スト フィ ー ル ド の スタ イル ③ (form.css) 





inputltype='text'] inputltype="email'( 





省略 (前 と 関 で 解説) 








/* 角 丸 を 5px で 指定 する 7 





-webkit-border-radius: 5DPx: 


border-radius: 5px: 











、 外側 の ボー ダー を つけ る ツ 





border:#5d738e 2px solid: 





} 








うう 
CC 


プレ ー ス ホル ダー の CSS5 は 「input::- 
webkit-input-placeholder」 と いう セ 
レク タ で 指定 可能 で す 慌 罰 。 入 力 する 
っ と き の 文字 より 色 を 薄く する こと で 、 
初期 入力 され て いる 文字 で ある こと を 
わか りや すく し て お きま し ょ う 還 謙 。 


@ 


っ テキ スト フィ ー ル ド 部 分 の 最後 に 、 入 
力 さ れ た 文字 の クリ アボ タン を 作り ま 
す 。「x」 の アイ コン は デバ イス の テキ 
スト と CSS で 作る こと も 可能 で す が 、 
Android で は 角 丸 が 綺麗 で は な く 、 フ 
ォ ン ト が 変わ っ て し まう た め 、 こ こ で 
は a タ グ の 背景 画像 で 指定 し まし た 。 
「position:absolute:」 と 「right:7px:」 

で 右側 に 配置 し て 、「display:inline- 
block:」 で 要素 の 大 き さ を 確保 し て 
いま す 。 さらに この HTML 自 体 が 
iPhone4 以降 の Retina デ ィ ス プレ イ に 
も 対応 する も の に な っ て お り 、 全 体 が 
半分 の 大 き さ に な っ て いる の で 、CSS 

M の 背景 画像 も で 半分 の 大 き さ (ここ で 
は 「background-size:128px 60px:」) 
で 表示 させ ます 回 証 。 
入力 され た 文字 を クリ ア す る 仕組 み は 
後述 する JavaScript で 実装 し ます 。 





プレ ー ス ホル ダー の スタ イル (form.css) 


07 | ユー ザビ リティ の 高い iPhone 風 U り | フォ ー ム ー 








テキ スト フィ ー ル ド の プレ ー ス ホル ダー 





/ プ レー ス ホ ル ダー の 色 を 指定 する 7 
_Input::-webkit-input-placeholdert 

color:#808080: 
} 











クリ アボ タン の スタ イル (form.css) 


-formText at 











text-indent:-9999px: 





/ 松 対 配置 で 右側 に 寄せ る ツ / 





position:absolute: 。 
top:9px: 
right:7Px: 


、 / 要 素 の 大 き さ を 指定 する 7 
Inline-block: 





height:20px: 





、 / ア イコ ン の 痛 景 画像 を 指定 する 7 
background:url(../images/sp_icons.pno) 
有 0px Opx no-repeat 電 fff: 





/iPhone4 対 応 の た め 半 分 の 大 き さ で 表示 
-webkit-background-size:128px 60px: 





_ background-size:128px 60px: 
} 








MEM0 


PC で 鮮明 に 見 えて いる 画像 で も 、 高 精細 な Retina デ ィ ス プレ イ で は ぼや け て 見 えて し ま 
うこ と が あり ます 。 そ の 対策 と し て 、 大きな サイ ズ の 画像 を 用 意 し て 50% の サイ ズ で 表示 
させ る と いう 方 法 が と られ ます 。 こ こ で は 256pxx120px の 画像 を 128pxx60px で 表示 させ 
て いま す 。 





シル ルト シル ン ル アキ 
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次 に チェ ッ ク ボ ックス の 実装 を 行い ま 
す 。iPhone の 設定 画面 で は 、0N と OFF 
を タッ プ す る ご と に 左右 に アニ メー シ 
ョ ン で 切り 替え る UI が 採用 され て い 
ます 。 こ の UI に より ユー ザー は タッ 
プ し や すく 、O0N か 0FF か 非常 に わか 
りや すく な っ て いま す 。 今回 は チェ ッ 
クボ ックス を 、 この UI で 実装 し て み ま 
し ょ う 還 還 。 




















iPhone ライ ク な UI を 実現 する 仕組 み 





label タ グ で 見 える 範囲 
overflow:hidden: で は み 出 す 部 分 は 見 えな い 。 


ーー 


を ーーー ニー ニー ニー 受 
に input タ グ が チェ ッ ク さ れる と 、 


左右 に アニ メー ショ ン で 動く 
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CHAPTER 02 





ユー ザー イン ター フェ イス 


0@ 


HTML は 民 還 の よう に p タ グ の 中 に 
label タ グ を 記述 し 、 チ ェ ッ クボ ッ ク 
ス と な る input タ グ を さら に 、 そ の 中 
( 子 要素 ) に 書く の が ポイ ント で す 。 


02 


p タ グ を 絶対 配置 で 右 に 寄せ 、label 
グ を 実際 に タッ プ す る ボッ クス に し ま 
す 。 角 丸 と ボー ダー を つけ 、「overflow: 
hidden:」 で 内 包 す る 「input」 要 素 が 
は み 出 る 部 分 を 隠す よう に し ます 民 玉 。 
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チェ ッ ク ボ ックス も テキ スト フィ ー ル 
ド 同 様 「-webkit-appearance:none:」 
で 初期 化し 、 背 景 画像 も 半分 の 大 き さ 


皿 還 チェ ッ ク ボ ックス の スタ イル ② (form.css) 


チェ ッ ク ボ ックス (index.htmU 





<h2 class="checkTitle"> メ ー ル マガ ジン の 購読 </h2> 
<p class="formCheck"><label><input type="checkbox" name="mailMag" value=""></ 
label></p> 








チェ ッ ク ボ ックス の スタ イル ① (form.css) 









































-formCheckt height:28Px: 
絶対 配置 で 右側 に 寄せ る */ 
position:absolute: /* 角 丸 を 高 さ の 半分 で 指定 
top:9Pxi -webkit-border-radius: 14Px: 
right:12px: border-radius: 14Dx: 
display:block: border:#7e7e7e 1px solidi: 
} ii ーー ャ ーー 
.formCheck>labelt /* 内 包 す る 要素 が は み 出 な いよ うに する ?/ 
position:relative: overflow:hidden: 
display:block: } 
width:78px: 





で 指定 し ます 。「transition」 で 「left」 ックス を タッ プ す る と チェ ッ ク ボ ッ ク 
の 位置 が アニ メー ショ ン で 動く よう に ス が 「:checked」 の 状態 に な り 、 画像 
設定 し て 、 セ レク タ 「input[type= が 右 に アニ メー ショ ン す る と いう 仕組 
"checkbox"]:checked」 で 変化 後 の み で す 男 。 

「left」 の 値 を 指定 し ます 。 チ ェ ッ クボ 





inputltype="checkbox"]( 


/*iPhone4 対 応 の た め 半分 の 大 き さ で 表示 */ 








/ チ ェ ッ クボ ックス の 初期 化 / 


-webkit-backqround-size:128px 60Px: 





-webkit-appearance:nOne: 


background-size:128px 60Px: 











/* 絶 対 配置 で 設定 し て お く */ 





position:absolute: 


-webkit-border-radius: 14Ppxi 
border-radius: 14px: 












































top:-1Px: 
left:-1pxi border:#7e7e7e 1px solid: 
margin:Opx: 

/ ト ラン ジ シ ョ ン で 位置 が 動く よう に する */ 
width: 78px: -webkit-transition-property: left: 
height:28px: -webkit-transition-duration: 0.25: 

-webkit-transition-timing-function: ease-in-out: 
/* 背 景 画像 を 設定 */ B 
background:url(../images/sp_icons.png) -51px -30px no-repeat input[type="checkbox"]:checkedt 
井 eee: left:-30px: 

} 
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レン シン スン キメ) 


11 

次 に ラジ オ ボ タ ン を 実装 し ます 。 
HTML で は リス ト () タグ 内 に 3 つの 
ラジ オ ボ タ ン を 記述 し て いま す 。 さ ら 
に チェ ッ ク ボ ックス と は 異な り 、 
rlabeu タグ を 「input」 タ グ の あと に 
兄弟 要素 と する の が ラジ オ ボ タ ン の ポ 
イン ト で す 罰 還 。 


ラジ オォ ボタン (index.htmU) 





<h2 class="checkTitle"> メ ー ル マガ ジン の 形式 </h2> 





<ul class="radioSet"> 





<li><input type="radio" name="mailType" id="no1" value=" テ キス ト "><label for="no1"> テ 


キス ト </labe></li> 





<li><input type="radio" name="mailType" id="no2" value="HTML"><label for="no2"> 


HTML</label></l> 





<li><input type="radio" name="mailType" id="no3" value=" 携 帯 "><label for="no3"> 携 帯 </ 


label></li> 





ul> 





今回 リス ト タ グ を 横 に 並べ る の に 、 親 
要素 の ul タグ に 「display:box:」 を 使 
いま し た 。 こ れ は 「float」 を 使わ ず に 
内 包 す る 要素 を 横並び に で きる プロ パ 
ティ で す 。 内 包 す る リス ト タ グ が 3 分 
割 に な る よう に 「box-flex:1:」 を 指定 
し ます 罰 玉 。 





ラジ オ ボ タ ン の スタ イル (① (form.css) 























-radioSett overflow: hidden: 相 
/* 内 包 す る 要素 を 横並び に する 1 
display:-webkit-box: _rradioSetlt 
display:-webkit-flexbox: /* 幅 を 3 分 割 想定 で 指定 する */ 
display:flexbox: -webkit-box-flex:1: ー 

box-flex:1: 

_ margin:6px Opx Opx: height:28px: 

width:100%: border-right:#54677d 1px solid: 





} 





-Webkit-border-radius: 5pxi 


_radioSet lilasLchild( 





border-radius: 5px: 





/* 最 後 の リ スト タグ は 左 の ポー ダー を な く 
す ツ 





border:#54677d 1px solid: 


border-right:none: 





ーー 紀 
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リス ト タ グ の 中 は 「-webkit- 
appearance:nonei」 で 初期 化し た ラジ 
オ ボ タ ン と 、 グ ラ デ ー シ ョ ン の 背景 を 
指定 し た label タ グ を 絶対 配置 で 重ね 
て いま す 駐 還 。 ス マー ト フ ォ ン の プラ 
ウザ は label タ グ を タッ プ し て も input 


タグ に 反映 され な いも の が 多い で す が 、 
この よう に 重ね て お け ば 問題 は あり ま 

せん 。 また 、 セ レク タ の 兄弟 要素 指定 

「input[type="radio"]+labeu と 擬似 要 

素 「:checked」 を 用 いる こと で 、 チェ 

ッ ク さ れ た ラジ オ ボ タ ン の 育 景 と 文字 

を 変え る よう に な っ て いま す 芋 婁 。 
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ユー ザー イン ター フェ イス 


ラジ オ ボ タ ン の スタ イル ② (form.css) 


radioSet liinput[type="radio* 0 
/ ラ ジオ ポタ ン の 初期 化 


-webkit-appearance:none: 


/* 未 選択 時 の 背景 グラ デー ショ ンー 」 
background-image: -webkit- gradient(inear left top, left bottom。 
color-stop(096, #d4dbdf), color- -stop(100%, #b4bec6)): 
background-image: -webkit-linear-gradient(-90deg, #d4dbdf 0%。 
_#b4bec6 100%): 

background-image: linear-gradient- -90deg, #d4dbdf 0%,#b4bec6 
100%): 











絶対 配置 で 設定 し て お く 
position:absolutei 














display:inline-blocki 





Z-index:1: 
} ーー = msn 
_-radioSet li:first-child inputltype="radio"]+labett 


























height:28px: -webkit-border-radius: 4px Opx Dpx 4Px: 
、 borderinone border-radius: 4px Opx Opx 4PXi: ーー 
z-index:10: 。 _ ] 
) radioSet l:lastLchild inputltype="radio"]tlabell 


-radioSet li inputltype="radio"]+labet 
だ 絶対 配置 で 設定 し て お く ?/ ーー 
Position:absolute } 


-webkit-border-radius: Opx 4px 4Px OPX: 


border-radius: 0px 4px 4px Opxi 





、displayinline-block: 
width:100%。 
height:28px: 


/ ラ ジオ ボタ ン が チェ ッ ク さ れ た と き の 
/ その 兄弟 要素 の label の セレ クタ 指定 
.radioSet li inputltype="radio"]:checkedr+labelt 


color#FFF 





font-size:13px, 
line-height:28px: 
text-align:center: 
color:#3f5c84: 





/* 選 択 時 の 背景 グラ デー ショ ン ツ 

background-image: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, #8c9aae), color-stop(10096, #647792)): 
background-image: -Webkit-linear-gradient(-90deg, #8c9aae 0%, 





text-shadow:0px 1px 1px rgba(255.255.255..4): 


#647792 100%): 





100%): 





次 に 送信 ボタ ン を 実装 し ます 。 こ ちら 
は HTML は 通常 の も の と まっ た く 変 わ 


記 還 送信 ボタ ン (index.htmD 


<input type="submit" value=" 送 信 "> 
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り ま せん 馬 罰 。 CSS で は submit ボ タ 
ン を 「-webkit-appearance:none:」 で 
初期 化し 、「display:table-cell:」 を 指 
定 す る こと で テキ スト を 縦 中 央 配置 で 


background-| image: linear-gradient(-90deg, #8c9aae 0%, #647792 


ある 「Vvertica-align:middle:」 を 指定 
し て いま す 太 記 。 背 景 の グラ デー ショ 
ン は 、iPhone ライ ク な ボタ ン に する た 
め に 4 色 の グラ デー ショ ン に し まし た 。 


送信 ボタ ン の スタ イル (form.css) 


inputlype="submit't 








/iPhone ラ イク な ボタ ン を 表現 する 





ラジ オ ボ タ ン の 初期 化 


-webkit-appearance:none: 





background-image: -webkit-qradient(linear, left top, left bottom, 
color-stop(0%, #fbfbfb), color-stop(499%, #d2d3d5), color-stop(5096, 





パテ キス ト を 終 中 央 に 配置 する 用 意 り 


#cOc1c4). color-stop(100%, #a7aaad)): 





display:table-cell: 


background-image: -moz-linear-gradient(0deg, 才 dfdfd 09%, 
#d2d3d5 4996, #cOc1c4 5076, #a9aaad 100%): 





width:100%: 


background-image: inear-gradient(0deg, #fdfdfd 096, #d2d3d5 





_ height:46pxi 


4996, #cCOc1c4 509%, #a9aaad 100%): 








font-size:20px: 





-webkit-border-radius: 14Ppx: 





、 / テ キス ト を 終 中 央 に 配置 する ツ / 





border-radius: 14Px: 





vertical-align:middle: 





border:#464951 3px solid: 





/* 複 数 指定 の グラ デー ショ ン で 


テキ スト フィ ー 
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最後 に 、 テ キス ト フ ィ ー ル ド の 入力 を 
クリ ア す る JavaScript を 実装 し ます 





MEM0 


今回 の サン プル で は 、JavaScript ラ イブ 
ラリ で ある jQuery」 周 を 使っ て いる た 
め 、「<script src='j5/jqueryjs2ver=1.7"></ 
script>」 で jQuery を 読み 込ん で いま す 。 














jauery 


http://jquery.com/ 








まとめ [CONCLUSION] 





] 


レン 4 リル っ 列 上 EN た に (gl の と 


華 基 。a タ グ で ある 「x」 を クリ ッ ク す 記述 する こと で 、a タ グ に よる ペー ジ 
る と 「.prev()」 で input タ グ の 内 容 を 先頭 へ の リン ク を キャ ン セ ル し て いる 
操作 で き 、「.val(“)」 で 中 身 を クリ ア し 仕組 み で す 。 

て いま す 。 最 後に 「return false:」 を 


証 記 テキ スト フィ ー ル ド を クリ ア す る JavaScript (index.htmU 

















<Script src="js/jqueryj52ver=1.7"></script> // a タ グ の 1 つ 前 の 要素 の 市 
証 陸 was 3 = //input タ グ の [value] の 中 身 を 空 () に す 
<script type="text/javascript"> ee る 本 
// DOM の 読み 込み 完了 を 待つ *Ghis)prevOva(O: 
WunctonOt 。 
= 7a タ グ の デフ ォ ルト の 化 能 を な くす 
ー /7 ョ a タ グ の class [inputTextCLI に click イ ベン return false: ーー 
ト を つけ る 昌 5 能 。 ee 
$(CinputTextCL).bindCclick.function0t ) 四 - 
es <script> 


フォ ー ム は UI の 良し 悪し で ユー ザー の 反応 が 如 を し て し まい ます が 、 ア イコ ン な ど は あえ て 画像 
変わ る コン テン ツ で す 。 ス マー ト フ ォ ン 対応 の ポイ ン を 使う こと を 選択 し て 、 そ の ぶん 動き な ど に 注力 を し 
ト は 「 タ ッ プ し や すい 大 きめ の 要素 」 と 「 使 い 慣れ た た ほう が 、 い ろ い ろ な デバ イス の 対応 も ち し や すく な り 
イン ター フェ イス 」 の 2 つ に 尽き ます 。 CSS3 で 実装 一 貫 性 の ある UI を 実現 で きま す 。 

る 場合 、 ア イコ ン な どの 細か いと ころ を 表現 し よう と 
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CHAPTER 02 
ユー ザー イン ター フェ イス 


邊 6 ペー ジ を スラ イド させ る 
リ と る ショー レ ニョ ンー レス 





スマ ー ト フォ ン 向 け サ イト の 定番 で も あ 
る リス ト 型 の ナビ ゲー ショ ン 。 こ こ で は 
コン テン ツ を スラ イド させ て 表示 する 仕 
組み を 紹介 し ます 。 
制作 ・ 文 ノ 山 本 圭 助 

(株 式 会 社 ラ ナ デ ザ イン アソ シ エ イ ツ ) 
the Milky Way 


galaxy 


moon 制作 の ポイ ント 


時 コン テン ツ を 左右 に 移動 させ て 内 容 を 
切り 替え る 

時 JavaScript と transition プロ パテ ィ で 
スラ イド を 実装 する 

置 ヘ ッ ダ ー の 内 容 や 、 メ イン ビジ ュ ア ル 
も 切り 替え る 







































































[ios 4.0 以上 
[Avaed ) 16 以 E ] 
セク ショ ン で コン テン ツ を 囲っ て 移動 ヘッ ダー の 内 容 も ペー ジ ご と に 変更 
横並び に 配置 し た 各 ペ ー ジ の ヘッ ダ 
各 コ ン テ ン ツ を 透 ー の 見 出し や 、 
ベッ タ 三 
明 な セク ショ ン で 迄 3 の) 「 戻 る 」 ボ タン の 
囲い 、left プ ロ パ 表示 ノ 非 表示 も 、 
ティ の 値 を 変化 さ ホピ CSS を 使っ て 実現 
志 る こと で で 、 ペー っ で きま す 。 
ジ 全体 を 移動 させ 
て いま す 。 | 
セク ショ ン セク ショ ン 
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る ペー ジ の 











08 | ペー ジ を スラ イド させ る リス ト 型 ナ ビ ゲ ー シ ョ ン 














回 還 Web ペー ジ の 全体 構成 





これ か ら 作 成す る ペー ジ の 全体 構成 は 、 
回 較 の よう に な り ま す 。 

各 コ ン テ ン ツ を 透明 な セク ショ ン で 囲 
い 、 そ れ を 移動 させ る こと で ペー ジ 全 
体 を 移動 させ ます 。 

ペー ジ と な る セク ショ ン と 、 目 次 と な 
る リス ト は 回 語 の よう に 配置 し ます 。 

















人 屋 ) セク ショ ン と リス ト の 配置 


<section id="page-0"> 


// 目次 
<nav> 
<ul> 


<li><a href="#page-1">1 ペ ー ジ 目 へ </a></li> 


<li><a href="#page-2">2 ペ ー ジ 目 へ </a></l> 
<li><a href="#page-3">3 ペ ー ジ 目 へ </a></l> 


<7u> 


</nav> 
<7section> 











セク ショ ン 





セク ショ ン | 


<7div> 


</section> 





<section id="page-2"> 
<div class=*content'> 

/ 2 ペー ジ 目 
<div ーー 


</section> 











<section id=" 





<div class="content"> 





<section id="page-1"> 


<div class="content"> 


// 3 ペー ジ 目 


</div> 











</section> 
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CHAPTER 02 


ユー ザー イン ター フェ イズ 


02 

各 ペ ー ジ (section 要素 ) を くく る ラッ 
パー 要素 (#wrapper) も 用 意 し て お 
きま す 区 還 攻 3。 

この ラッ パー 要素 の overflow プロ パテ 
ィ を hidden に 設定 する こと に より 、 ス 
マー ト フ ォ ン で 横幅 が 画面 に ぴったり 
フィ ッ ト す る よう に な り ま す 。 





芝 誠 | ラッ パー 要素 の 準備 (HTML) 











ラッ パー 要素 の 準備 (CS) 


/css 


Merappert 3 


position: relative: // overfrow 用 





height: 1000px。 // ペー ジ の 高 さ を 設定 





7 旧 炊 
<section id="page-0"> … <7section> 
// 1 ペー ジ 目 








<section id="page-1"> .… </section> 


<section id=" Tpage-2"> section> 

// 3 ペー ジ 目 _ 
-<section id="page-3"> .…</section> 
2 ーー 


</body> 








overflow: hidden: 


} 











MEM0 


PC 向け に 同様 の こと を 行い た い 場 合 は 、 
body 要素 だ け で も 指定 可能 で す 園 。 


国 PC で 横幅 を 画面 に フィ ッ ト さ せる 


body{ 


overflow-x: hidden: 








人 Q の ) 
3 
各 ペ ー ジ を CSS て 画面 右 外 へ 配置 し 


ます 了 葉 還 。left プロ パテ ィ の 値 を 使っ 
て 、 ペ ー ジ を 左右 に 移動 させ ます 。 


各 ペ ー ジ を 画面 右側 に 配置 する 


sectiont 。 二 
position: absolute: ョ 
left: 1009%: // 基準 位置 (画面 外 へ 置く ) 
ー width: 100%: 
} 





リ レ る ジョー レン クー レス ノ )( ゴ 7 












































0& リズ ト の 旧 の ポー ダー を 条 十 ある 

// 隣接 セレ クタ の 場合 
リス トナ ビ ゲ ー シ ョ ン を CSS で 作り _navl*iUt = 才 
ます 。 _ border-top: 1px solid bbb,。 遇 還 誠 間 折 衣 
隣接 セレ クタ (+) か 、 間 接 セレ クタ 1 人 _- 
(-) を 利用 し て 、 リ スト の 間 の ボー ダ // 剛 換 セ 人 ク グ の 場合 as 
ー を 指定 し ます 区 事 。 に ーー 一 - ー 

border-top: 1px solid #bbb: 
} 還 還 = 
MEM0 


リス ト の 間 に ボ ポー ダー を 引き た い 場 合 、 

:first-child 擬似 タラス を 利用 し て も 同様 の 表 
示 が 可能 で す 。 

:first-child は 、 子 要素 の 先頭 要素 を 特定 する 
こと が で きる の で 、 ま ず す べ て の 要素 に ボー 
ダー を 指定 し 、 そ の 後 で 先頭 要素 の ポー ダー 
指定 を 解除 し ます 園 。 





:first-child 擬 似 ク ラス の 使用 例 


_// すべ て の U 要 素 に ボー ダー を 設定 





-/ 先頭 要素 の み 除外 





navlit 


border-top: 1px solid #hbb: 
} 


nav li:first-child { 
border-top: none: 


} 
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// CSS 


08 | ペー ジ を スラ イド させ る リス ト 型 ナビ ゲー ショ ン 





// CSS 





*COEUMN 





lr+l( 


IE3IEI 





background: red: 


background: red: 





』 


} 





HTML 





/ HTML 





<ul> 


<ul> 





<li>list 1<7l> 


<li>list 1</> 





<li>list 2</li> // 背景 が 赤色 に な る 
<li>list 3<7ll> // 背景 が 赤色 に な る 





<li>list 2</li> // 背景 が 赤色 に な る 








<li>list 3</li> // 背景 が 赤色 に な る 





<7ul> 


/ 隣接 セレ クタ 


<7ul> 


// 間接 セレ クタ 





// CSS 





7css 








h2+pt 





background: blue: 





background: blue: 





} 





} 








7// HTML 


7// HTML 





<h2> 見 出し 1</h2> 





<h2> 見 出し 1</h2> 





<p> テ キス ト <7p> // 背景 が 青色 に な る 


<p> テ キス ト </p> // 背景 が 青色 に な る 





<p> テ キス ト </p> 





<p> テ キス ト </p> // 背景 が 青色 に な る 





<h2> 見 出し 2<7h2> 





<h2> 見 出し 2<7h2> 








<p> テ キス ト </p> // 背景 が 青色 に な る 





<p> テ キス ト </p> // 背景 が 青色 に な る 





<p> テ キス ト </p> 





05 


に ノ 


transition プロ パテ ィ を 使っ て 、 ペ ー 
ジ を 移動 させ ます 民 還 。 
transition-duration で 時 間 を 指定 する 
と 、 値 が 変更 され る 際 に アニ メー ショ 
ン す る よう に な り ま す 。 





<p> テ キス ト </p> // 背景 が 青色 に な る 


JavaScript と transition プロ パテ ィ で スラ イド を 実装 する 


丘 証 max-width で 最大 画面 幅 を 指定 





section 【 








-webkit-transition-duration: 600ms: 





-moz-transition-duration: 600ms: 





) 
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CHAPTER 02 


ユー ザー イン ター フェ イス 


transition プロ パテ ィ 

transition で は 、 要 素 の 値 を 変更 する 際 の アニ メー 
ショ ン (トラ ンジ ショ ン ) を 指定 する こと が で きま 
細 018 


| transition プロ パテ ィ の 要素 


適用 する プロ バテ ィ 名 を 指定 する こと で 、 ア ニ メ ー シ 
ョ ン す る プロ パテ ィ を 限定 させ る こと が で きま す 。 
カン マ 区 切り で 複数 指定 も 可能 で す 


アニ メー ショ ン に か ける 時 間 を 指定 し ます 。 

単位 は s ( 秒 ) か ms (ミリ 秒 ) で 、0 の 場合 で も 単 
位 は 必要 で す 。 

カン マ 区 切り で 複数 指定 する こと で 、transition- 
property で 指定 し た 複数 プロ パテ ィ そ れ ぞ れ の 時 間 
を 指定 する こと が で きま す 。transition-property で 
指定 し た プロ バテ ィ 数 より 少な い 場 合 は 、 繰 り 返し 扱 
い に な り ま す 。 92 と 03 は 同じ 効果 で す 。 


アニ メー ショ ン の 加速 や 減速 な どの イー ジン グ を 指定 
し ます 。 

ease が デフ ォ ル ト で 、 他 に linear、ease-in、 
ease-out、 ease-in-out が あり ます 


transition-delsy と ら ン が 開始 され る まで の 待ち 時 間 を 指定 し 





transition-property 





02 時 間 を 指定 する 値 が transition-property で 指定 し た 
プロ パテ ィ 数 より 少な い 


transition-duration 


transition-property: opacity, left, top, height: 
transition-duration: 3s, 5s: 


03 時 間 を 指定 する 値 が transition-property で 指定 し た 
プロ パテ ィ 数 と 同じ 


transition-timing-function 


transition-property: opacity, left, top, height: 
transition-duration: 3s, 5s, 3s, 55: 


transition-timing-function 






transition-timing-function は 、cubic-bezier() 関数 (3 次 ベジ ェ 曲 線 ) で イー ジン ) 3 次 ペ ジェ 曲線 
グ を 指定 する こと も で きま す 。 
3 次 ペ べ ジ ェ 曲線 は o? の よう な カー プ で 、 値 の 変化 し て いく 様子 を 変更 で きま す 。 値 の 変化 率 

き 
0: cubic-bezier() 関数 の 文法 X2 y2 





cubic-bezier(x1, y1, x2, y2): 


イー ジン グ の 例 ] 


// 例 
section { 





-webkit-transition-timing-function: cubic-bezier(0.42. 0, 0.52, 1): 





時 間 の 経過 律 
1 1 [ませ TH | 
-moz-transition-timing-function: cubic-bezier(0.42, 0, 0.52, 1): 


} 





訓 





値 の 変化 を 開始 する た め に は 、 何 か き 
っ か けが 必要 に な り ま す 。 

今回 は 、 リ スト の リン ク を クリ ッ ク す 
る と body 要 素 の クラ ス 名 を 変更 する 
よう に し ます 回 語 。 

これ は CS5 で は で き な い の で 、 

JavaScript を 使用 し ます (簡易 な 記述 
に な る よう 、jQuery を 用 いて いま す )。 
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// ドキ ュ メ ント が 読み 込ま れ た ら 実 行 。 
$(function() { 


// メニ ュー を クリ ッ ク し た 時 の 動作 を 指定 。 
$("nav a").click(function(event) { 
// リン ク の ハッ シュ を も と に 、body の ク 
ラス 名 を 切り 替え 。 


リス ト の リン ク を クリ ッ ク す る と 、body 要素 の クラ ス 名 を 変更 する 


var page = this.hash.slice(1): 
$("body').removeClass(). 
addClass(page): 

// デフ ォ ル ト の リン ク 遷 移 を キャ ン セ ル 。 
event.preventDefault(): 


}): 





ジ を スラ イド させ る リス ト 型 ナビ ゲー シ 





各 ペ ー ジ の ID と 同じ クラ ス 名 が body 
に あて られ た と き が 、 ペ ー ジ が 呼ば れ 
た と き と い うこ と に な り ま す 加 量 菩 。 





2 ペー ジ 目 が 呼ば れ た と き 


3 ペー ジ 目 が 呼ば れ た と き 





<body class="page-2"> 


<body class="page-3"> 








// 2 ペー ジ 目 


// 3 ペー ジ 目 





<section id="page-2"> .… </section> 

















</body> _ </body> 
/Css 0 計 団 





-Page-2 #page-2 ag 1 








目次 と な る 初期 ペー ジ 用 に 、 body の 最 
初 の クラ ス 名 は 「page-0」 と し て お き 
ます 葉 還 。 


初期 ペー ジ の 設定 


<body class="page-0"> 








</body> 








IO⑥) 
U? 
各 ペ ー ジ が 呼ば れ た と き の 設定 を 記述 
し ます 加 語 。 


これ で り リ シ ウ を クリ ッ ク ず る と 、、 ペー 
ジ が 右 か ら 左 へ 動く よう に な り ま し た 。 





次 に 、「 戻 る ポタ ン 」 を 作成 し まし ょ う 。 
その 前 に 、 ま ず 「 戻 る ポタ ン 」 を 配置 
する ヘッ ダー を 作成 し ます 還 還 。 


各 ペ ー ジ が 呼ば れ た と き 


// 初期 ペー ジ (目次 ) 





-page-0 #page-0( left: 0: } 





// クラ ス 名 が page-0 で は な いと き (一 他 の 


ペー ジ を 呼ん だ と き ) 


// 1 ペー ジ 目 が 呼ば t れ た と き 





/ 画 面 に 移動 させ る 。 
#page-0{ left: -10096: } 





きた と き ) 


// 初期 ペー ジ が 呼ば れ た と き (目次 に 戻っ て 





-/ 画面 内 に 表示 され る よう に する 。 


目次 と 同様 に 、 リ ンク を クリ ッ ク す る 


と body 要素 の クラ ス 名 を page-0 に 切 


り 替 えら れる よう に 、nav 要 素 の 中 の 
a 要 素 を 設定 し ます 。 


_.page-1 #page-1{ left: 0: 院 - 
 // 2 ペー ジ 目 が 呼ば れ た と き 世 
.Page-2 #page-2{ lefE00) ー 

// 3 ペー ジ 目 が 呼ば れ た と き 


-Page-3 #page-3{ left: 0: } 二 





ヘッ ダー を 作る 


<header> 





<h1> 見 出し </h1> 





<nav><a href="##page-0">back</a></nav> 





</header> 





1 1 
ヘッ ダー の 背景 を 、 グ ラ デ ー シ ョ ン 
作成 し ます 邦 同 。 


が! 


回 還 ヘッ ダー の 背景 





header【 と 





background-image: -moz-linear-gradient(top, 草 666, 草 333): 





background-image: -webkit-linear-gradient(top, #666, #333): 





} 
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CHAPTER 02 





ユー ザー イン ター フェ イス 


グラ デー ショ ン の 指定 の 仕方 は 、0] の 通り で す 。 中間色 は 省略 可能 で 、 位 置 は % で 指定 し ます 。 ベ ンダ ー プ レフ ィ ッ クス が 必要 で す 02。 
Chrome や Safari で は 、: の よう な 指定 も 可能 で す 。 中 間 色 は 省略 可能 で 、 位 置 は % か 0 1 の 小数 値 で 指定 し ます 。 


"グラデ ーション の 指定 0 ベン ダー プレ フィ ックス 


linear-gradient( 方 向 , 開始 色 , 中 間 色 位置 (%), 終了 色 ): -moz-linear-gradient(): 
-webkit-linear-gradient(): 


: Chrome や Safari で 可能 な 記述 
-webkit-qradient(linear, 開始 位置 , 終了 位置 , from( 開 始 色 ), color-stop( 位 置 , 中 間 色 ), to( 終 了 色 )): 





尼 還 「 戻 る ポ ボタン 」 研 哀 .before 擬 似 要素 で 空 要素 を 追加 する 
header nav:before { 
尼 還 の よう な ボタ ン を 作る 際 に 、 左 側 content: "": 
の 三角 部 分 も CSS の み で 作成 する こ width: 20px: 
と が で きま す 。 height: 20px: 
まず 、:before 擬似 要素 で 空 要素 を 追加 Mo 
し ます 廊 記 。 次 に 、 追 加 し た 空 要素 を ま 


transform プロ パテ ィ で 回 転 させ ます 。 


回 = と 三 F だ ヽ パテ 
この と き 、transform-origin プロ パテ 古 評 追加 し た 空 要 素 を 、transform プロ パテ ィ で 回 転 さ せる 


ィ で 、 回 転 の 基点 と な る 位置 を 中 心 header nav:before { -moz-transform: rotate(45deg): 
(デフ ォ ル ト ) か ら 左 上 に 変更 し て お -moz-transform-origin: 0 0: -webkit-transform: rotate(45deg): 
きま す 配 -webkit-transform-origin: 0 0: } 

transform プロ パテ ィ 


transform プロ パテ ィ で は 、 要 素 に 対し て "! の よう な 変形 を 0 transform プロ パテ ィ で 指定 で きる 変形 
する こと が で きま す 。 の は 所 のり で 
定 で きま す ?: 。 た だ し 、 記述 の 順番 で 表示 結果 が 異な り ま す 

e 位 e 『45 度 
の で 注意 し て くだ さい 。 例 えば 、:。 の コー ド で は 、 回 転 を 行 rotate (角度 ) 回折 角度 の 単位 は deg。rotate(45deg) で 45 度 回 
うと 軸 も 一 緒 に 回 転 す る の で 、 移 動 の 後に 回 転 す る の か 、 回 拡大 / 科 小谷 率 は 数 値 で 指定 、 カ ンマ で 区 切る こと 


転 の 後に 移動 する の か で 表示 結果 が 異な り ま す 。 scale (倍率 ) で X 軸 Y 軸 それ ぞ れ を 指定 する こと が で きま す 。 
scale(0.5, 1.2) で X 軸 方 向 に 0.5 倍 、Y 軸 方 向 に 1.2 倍 
0 変形 内 容 を 複数 指定 で きる 





回 











歪み (シア ー)。 角 度 の 単位 は deg。skew(5deg) で 
kew (角度 ) 
transform: rotate(30deg) translate(10px, -5px): 症 還 5 度 歪 ませ ます 
移動 。 距 離 の 単位 は px。 カ ンマ で 区 切る こと で X 軸 
0: 回 転 と 移動 の 順番 に より 結果 が 異な る t late (距離 ) Y 軸 それ ぞ れ を 指定 する こと が で きま す 。 
0 translate(30px) で X 軸 Y 軸 方 向 それ ぞ れ 30px 分 移 
transform: rotate(30deg) translate(10px, -5pX): 


動 さ せま す 





transform: translate(10px, -5px) rotate(30deg): 





MEM0 

transform-origin プロ パテ ィ で は 、transform プロ バテ 国 transform-origin プロ パテ ィ 罰 位置 指定 の 記述 

ィ で 行う 変形 の 基準 点 を 指定 する こと が で きま す 同 。 

デフ ォ ル ト は 、 要 素 の 中 心 位 置 (50%. 50%) で す 。 transform-origin: X 軸 Y 軸 : transform-origin: left center: 
位置 の 指定 は background-position プロ パテ ィ な ど と 同 transform-origin: 20px 0: 
様 で す 囲 。 











142 





ヘッ ダー の 内 容 を ペー 


08 | ペー ジ を スラ イド させ る リス ト 型 ナビ ゲー ショ ン 


レキ コリ リ : と を 








13 

body に あて られ た クラ ス 名 を 利用 す 
る こと で 、 ヘ ッ ダ ー に 表示 され る 見 出 
し を ペー ジ ご と に 変更 する こと も で き 
ます 。 

:after 擬似 要素 と content プロ パテ ィ を 
使っ て 、title 属性 の 値 を 見 出し と し て 
表示 させ ます 馬 証 。 


title 属性 の 値 を 見 出し と し て 表示 する 
/7HTML 5 
<header> 
<h1 title="page0 title"></h1> 


<nav><a href="#page-0">back</a></ 











nav> 





</header> 








// CSS 
-page-0 header h1:before { 








_ content: attr(title): 


} 











MEM0O - 


content プ ロバ パテ ィ で は 、 attr() 関数 を 使 
っ て 要素 の 属性 値 を 表示 で きま す 園 。 


attr() 関数 を 使っ て 要素 の 属性 値 を 表示 


7 が HTML_ 
<p title="abc">DEF</p> 





pibefore{ 
content: attr(title): 


1 








// 表示 結果 
abcDEF 











1 

各 ペ ー ジ ご と に 見 出し を 変更 で きる よ 
う 、 独 自 デ ー タ 属性 を 利用 し ます 。 
独自 デー タ 属 性 は 、 カ スタ ム デ ー タ 属 
性 と も 呼ば れ 、「data- 名 前 =" 値 "」 の 
形式 で ユー ザ が 自由 に 属性 と 値 を 設定 
する こと が で きま す 。 

ペー ジ ご と の 見 出し と 、 ス タイ ル 記 述 
を 追加 し ます 度 還 。 


まとめ CONcLUSION] 


attr0 関数 を 使っ て 要素 の 属性 値 を 表示 
HTML 


<header> 


<h1 title=*page0 title" data-page1- 
title="page1 title" data-page2- 
title="page2 title" data-page3- 
title='page3 title"></h1> 


/css_ 
-page-1 header h1:before{ 





content: attr(data-page1-title): 
} 
_.page-2 header h1:before { 





content: attr(data-page2-title): 





<nav><a href="#page-0">back</a></ 
_nav> 


} 
-page-3 header h1:before { 





</header> 


content: attr(data-page3-title): 3 





独自 デー タ 属 性 (data- 名 前 =" 値 ") 


] 


CSS3 で 用 意 さ れる transition や animation な どの アニ 
メー ショ ン は 、JavaScript を 使用 し た も の より も 描画 
が スム ー ズ に 行わ れる よう に で き て いま す 。 

また 、 多 様 な プロ パテ ィ を 利用 する こと で 、 

意 し な く て も な 表現 が 可能 に な り 、 





ファ イル サイ ズ を 抑制 する こと が 可能 に な り ま す 。 
これ ら は 、 ス マー ト フ ォ ン な ど PC と 比較 し て 低 ス ペ 
ッ ク な マシ ン や 、 通 信 速 度 が 限ら れ た 環境 で は 特に 有 
効 に な り ま す 。 単純 な アニ メー ショ ン な ど で は 、 積極 
的 に 活用 し て みて くだ さい 。 
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た ニン レン スニ シム 


カス タム URL スキー ム と 
文字 量 の 変化 に 対応 で きる リス ト 





スマ ー ト フォ ン で は 「 カ スタ ム URL ス キ 
ー ム 」 と 呼ば れる 、 ア プリ ケー ショ ン へ 
直接 リン ク で きる URL が あり ます 。 プラ 
ウザ か ら の 「 カ スタ ム URL スキ ー ム 」 の 
使い 方 と 、 一 風 変 わ っ た 柔軟 性 の ある リ 
スト 表示 を 交え て それ ら を 紹介 し ます 。 


制作 ・ 文 ノ 執 行 大 介 


上 に 店 人 W に 関し て 店 舗 に 関し て 
4 制作 の ポイ ント 
上 商品 に 関し て 商品 に 関し て 


置 「display:table:」 と 「table-layout: 『 
に 8 採用 に 関し て 採用 に 関し て fixed:』 を 使っ た リス ト ( 
置 メ ディ アク エリ に よる 端末 の 横向 き 時 

の 表示 の 切り 替え 


SMS を 書く 時 「tel:」 な ど に 代表 され る 「 カ スタ ム 
URL スキ ー ム 」 の 使い 方 








i95 >〉3.0 以 上 | 


Map を 見 る 
: 経路 を 検索 


Map を 見 る 


[Andreig > 2.1 以 上 ] 


※Android は 一 部 対応 し て いな い 機 種 が あり ます 。 








「『ECHNNIC 1 TECHNIC 


複数 行 の 中 央 揃え が 可能 アプ リ へ の スム ー ズ な リン ク 






「display:table-cell:」 | SSERSS 「 カ スタ ム URL ス キー 

を 使う こと で 、 リ スト ム 」 を 使う こと で 、 従 
| SMS を 書く | 由 に 

に 入れ る 要素 の 幅 を 気 来 使わ れ て きた メー ル | 店舗 に 関し て 店 舗 に 関し て 

に せ ず 複数 行 の 中 央 揃 へ の リン ク (mailto:) 


| 商品 に 関し て ト 商品 に 関し て 
え を 実現 する こと が で | 党 Map を 見 る ] だ け に と ど ま ら ず 、 ス ご に 」 








: 場所 を 検索 So 1 
きま す 。 マー ト フ ォ ン の アブ プリ | に 季 B に 剛 し て | 馬 壮 近 用 に 関し て ( 
5 中 る へ の スム ー ズ な リン ク ーー ーー ニー 
| を 実装 する こと が で き 
2 ます 。 
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ど 09 | カス タム URL スキ ー ム と 文字 量 の 変化 に 対応 で きる リス ト 


) 01 
| まず は HTML に と りか か り ま す 。 


の コー ド の 「<div class="mainSec"> 


回 還 ベー ス と な る HTML (index.htmU) 


…</div>」 内 に 回 語 の よう に 記述 し て 
いき ます 。 はじめ に 「 お 問い 合わ せ 」 
の 欄 を マー クア ッ プ し て いき ます 。 ク 
ラス 「contactListInner」 の 中 に リス 





ト () タグ で anchor タ グ (以下 a タ 
グ ) を 囲ん だ も の を 3 つ 記 述 し 、 の ち 
ほど a タ グ の 「href 要 素 」 に 「 カ スタ 
ム URL ス キー ム 」 を 指定 し ます 。 











<!IDOCTYPE HTML> 








<htmllan 


<h1 class=*globalHeaderLogo"><img src="images/logo.png" 
alt="Books Panda Space"></h1> 





ァ <head> 


</header> 





<meta charset="UTF-8"> 





<title> 便 利 な アプ リケーション へ の リン ク と 柔軟 性 の ある リス ト </title> 


<article class="mainArticle"> 





<meta name="keywords" content=""> 








コ <meta name="description" content=""> 


<section class="mainHead"> 








<h1> 田 アプ リケーション へ の リン ク </h1> 





<Uink re='index" hre= ツ > 


<p> い ろ い ろ な アプ リ ヘ リン ク し ます 。</p> 





<7section> 





<meta name="format-detection" content="telephone=no"> 





<meta name="viewport" content="width=device-width, user- 


u scalable=yes, initia-scale=1, maximum-scale=1"/> 


<div class="mainSec"> 








<meta name='apple-mobile-web-app-capable" content="yes"> 





// ここ に 回 語 の 内 容 を 記述 





<!-- / .mainSec --></div> 





<!-- / .mainArticle --></article> 





4 <link re に "stylesheet" href="css/common.css"> 











<link re="stylesheet* href="css/ur_scheme.css"> 


<footer class="globalFooter"> 





<P class="copyringht">Books Panda Space</p> 




















</head> <!-- / .globalFooter --></footer> 
3 </body> 
』 <body> _ htm> ーー 二 隔 
z <header> 





<div class="mainSec"> 内 に 記述 する 内 容 (index.htmU) 








<div class="contact"> 











<h2> お 問い 合わ せ 先 </h2> <section class="contactListInner"> 
<h3> 電 話 </h3> 
<div class="contactList"> <ul> 








ロ <section class="contactListInner"> 


<li><a href="“> 店 舗 に 関し て </a></li> 





<h3> メ ー ル </h3> <li><a href=""> 商 品 に 関し て </a></li> 


MEM0 





<ul> <li><a href=“"“> 採 用 に 関し て </a></li> 





<li><a href=""> 店 舗 に 関し て </a></li> ul> 





今回 の サン プル で は 、2 つ の CSS フ ァ イ 
ル を 読み 込ん で いま す 。「common.css」 
は 全般 的 な スタ イル の 設定 、「url 





<li><a href=“"“> 商 品 に 関し て </a></ll> </section> 





<li><a href="“> 採 用 に 関し て </a></li> <!-- / .contactList --></div> 





</ul> <!-- / .contact --></div> 





</section> 





scheme.css」 は 個別 要素 に 対す る スタ 
イル の 設定 を 行っ て いま す が 、 本 書 で は 
「urL_scheme.css」 の 内 容 だ け を 解説 し 
ます 。 
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CHAPTER 02 





次 に 標準 の アプ リ へ 連携 させ る 欄 工 還 
と 、 サ ー ド パー ティ ー 製 の アプ リ を 連 


携 さ せる 欄 民 調 で す 。ul タ グ に クラ ス 
「appleList」 と いう 名 前 を つけ 、"| と 
同じ よう に リス ト タ グ の 中 に a タ グ を 
記述 し 、 こ ちら は アイ コン を 「figure」 


タグ 、 タ イト ル を 「h2」 タ グ で 記述 し 
まし た 。 3 


標準 の アプ リ へ 連携 させ る 欄 (index.htmU) 


<ul class="appleList"> 





<h2>Map を 見 る <span class="toggleBR* ><br></spanz : 場所 を 検索 <7h2> 
































<lz<a hre="> - ie 3 </a></l> 

<figure><imd src= "images/no2_ icon | _03. png" al mm 間 昌 昌 還 明 

<h2>SMS を 書く </h2> _ <li> _ 
_</a>< 人 > 早計 <a href-"> 5 ーー 9 
ー ass _ = <figure><img sr src=" 'images/no2 icon_04.png” alt=" "></figure> 1 
cs ー 較 <h2>Map を 見 る <span class='toggleBR" ><br></spanz : 経路 を 検索 </h2> 

<a href=""> 本 革 寺 7a></ll> 


<figure><img src="images/no2_icon_04.png" alt=""></figure> 


サー ド パ ー テ ィ ー 製 の アプ リ を 連携 させ る 欄 (index.htmU 


<ul class="appleList"> 
<li><a href= に 還 還 
<figure><imdg class="twitter" src="images/no2_icon_05.png" 
alt=""></figure> 

<h2>Twitter に 投稿 </h2> 


</a></ ル > 





_<l> 





<a href="" > 





<figure><img src="images/no2_icon_06.png" alt="></figure> 


<!-- / .appleList ー>gub 


<h2>Facebook<span class="toggleBR"><br></span> : 投稿 する </h2> 





</a></ ル > 


<l> 


<a href="fb://feed"> 








<figure><imd SrC= rc="images/no2_ icon_06.png” alt=" "></figure> - 


_<h2>Facebook<span class='toggleBR* ><br><7span> : Feed を 見 る </h2> 





<7a></l> 





<!-- / .appleList --></ul> 





CSS に よる スタ イル 設定 


03 


@9 


次 に CSS を 記述 し て いき ます 。 まず 
は 「 お 問い 合わ せ 先 」 を 囲む 「contact」 
と いう クラ ス の CSS で す 必 還 。 大 き 


さ を 指 定 し た あと 、「box-sizing: 


border-box:」 で ボー ダー (padding 
も ) の 幅 を width の 大 き さ に 含め な い 


よう に し ます 。 この 指定 を する こと で 、 


「width:100%:」 を 指定 し た 場合 、 ボー 
ダー や パ デ ィ ン グ の 幅 に か か わら ず 親 
要素 の 100% の 幅 を 確保 で きま す 。 さ 


「 お 問い 合わ せ 先 」 全 体 を 囲む 要素 (urL_scheme.css) 


contect 
大き さと 下部 の マー ジン を 設定 7 


-webkit-box-sizino: border-box: 


box-sizing: border-box: 





position:relative: 





margin:0px Opx 22Px: 


_ background- -color: #FFF: 


ら に 「box-shadow」 に 内 側 の 影 と 外 
側 の 影 を つけ ます 。 カ ンマ 区 切り で 複 
数 指定 する こと で 、 同 時 に 影 を 表示 で 
きま す 。 





box-shadow: inset Opx 1px 1px rgba(0.0, 
0.0.9.0px1px 1px Me6eaet: 


-webkit-border-radius: 6px 





width:1007%6: 





内側 の 影 と 外側 の 影 を つけ る ツ 


border-radius: 6Pxi 
border:#ababab 2px solid: 





/ ボ ポー ダー を width の 大 き さ に 含め な いよ う 
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-webkit-box-shadow: inset Opx 1px 1px 
rgba(0.0.0. 0.9.0px 1 PX 1px #e6eaef: 


} 





ーー 


ーー ピー- - 


0@ 


次 に 「 お 問い 合わ せ 先 」 の 見 出し の 部 
分 で す 区 還 区 衣 。「padding」 で 文字 の 
余白 を 指定 し 、「width」 で 幅 を 指定 し 
ます が 、 過 と 同じ く 「box-sizing: 
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border-box:」 を 指定 し て いま す 。 以 
後 も 、 ス マー ト フ ォ ン を 横 に 向け た 場 
合 も 幅 100% を 確保 で きる よう に 逐一 
入れ て いき まし ょ う 。 さらに iPhone 
ライ ク な 見 出し に する た め 、「text- 
shadow」 と 「linear-gradient」 を 指 


区 還 「 お 問い 合わ せ 先 」 の 見 出し (urL_scheme.css) 





定 し て いま す 。 こ こ で は 見 出し の テキ 
スト に ボー ルド を 指定 し て いま せん が 、 
Android で は ボー ルド 指定 し て も 効か 
な い の で 、 注意 が 必要 で す 。 














ー.contact h2t 見 出し の 背景 グラ デー ショ ン ツ 
4 padding:10px: background-image: -webkit-qradient(linear, left top, left bottom, 
P width:100%6: color-stop(0%, #bObccc), color-stop(50%, #889bb3), color- 





stop(50%, #8094ae), color-stop(1009%, #6d84a2)): 
/* パ ボー ダー を width の 大 き さ に 含め な いよ うに する 
-webkit-box-sizing: border-boxi 








background-image: -webkit-linear-gradient(-90deg, #b0bccc 0%, 
#889bb3 50%. #8094ae 50%, #6d84a2 100%): 





























- box-sizing: border-box: background-image: linear-gradient(-90deg, #b0bccc 09%, #889bb3 
p 50%, #8094ae 50%, #6d84a2 100%): 
1 /*iPhone ラ イク な テキ スト の 指定 

_ color: 電 件 = / 上 下 の ポ ボー ダー で より iPhone ら し くす る ?/ 
text-shadow:0Opx -1px 1px rgba(0.0.0..5): border-top:#cdd5df 1px solidi 
= border-bottom:#2d3642 1px solid: 

} 

還 ーー 





C 二 】 「 お 問い 合わ せ 先 」 の 見 出し 


KEIL'AY ニ と の Cy/p 


0S 


次 に 「 メ ー ル 」 と 「 電 話 」 の それ ぞ れ 
の セク ショ ン の 記述 で す 回 還 。div 要 素 
の 「contactList」 と いう クラ ス の 中 に 、 
「contactListInner」 と いう クラ ス の セ 


クシ ョ ン が 横 に 50% ず つの 大 き さ で 
並び ます 。 こ の よう な 場合 は 親 要素 に 
「display:table:」 と 「table-layout:fixed:」 
を 指定 し 、 子 要素 に 「display:table- 
cell:」 と 記述 する と 、 表 組み の よう に 
横幅 が 変わ っ て も 子 要素 は 50% を 維 


「 メ ー ル 」 と 「 電 話 」 の セク ショ ン (urlL_ scheme.css) 





持 で きる レイ アウ ト が 可能 で す 。 さ ら 
に 、「 メ ー ル 」 と 「 電 話 」 の ボッ クス の 境 
界 線 を 「 電 話 」 側 の 「border-rightu 
で 表現 し まし た 。 





-contactListt 





/* 内 包 す る 要素 を テー ブル の よう に 並べ る %/ 





display:table: 


-contactListInnert 





/* 内 包 す る 要素 が 合計 で 横幅 100% に な る */ 


display:table-cell: 





table-layout:fixed: 


} 





-contactListInner:first-childt 





width:100%: 


/ 横 並び の ボッ クス の 縦 の ボー ダー ツ / 





border-right:1px #666 solidi: 





-webkit-box-sizing: border-box: 


} 





box-sizing: border-box: 
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0@ 


次 の 「 メ ー ル 」 と 「 電 話 」 の 見 出し 部 
分 も 0 と 同じ よう に iPhone ライ ク な 
表現 で す が 、 こ ちら は グラ デー ショ ン 
を 異な る 表現 に し まし た 語 放 罰 。 


「 メ ー ル 」 と 「 電 話 」 の 見 出し 部 分 





臣 証 「 メ ー ル 」 と 「 電 話 」 の 見 出し 部 分 (urL_scheme.css) 





-contactListInner h3{ 





padding:6Px: 














color:#fff: 





text-shadow:0px -1px 1px rgba(0.0.0..5): 








た 本 の グラ デー ショ ン 違 い */ 








background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, 


#92a0ab). color-stop(1009%, #b6bec5)): 





background-image: -webkit-linear-qradient(-90deg, #92a0ab 09%, #b6bec5 100%): 





background-image: linear-gradient(-90deg, #92a0ab 09%, #b6bec5 100%): 





border-top:#717d85 1px solid: 





border-bottom:#989ea4 1px solidi 
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次 に 各 リ スト 要素 の 記述 で す 紅 還 。 


ー ダ ー を つけ 、 「:last-child」 セ レク タ 
を 使い 最後 の 子 要素 の み ボ ー ダ ー を な 
くす よう に し まし た 。 さ ら に 子 要素 の 


する こと で 、 「vertical-align: middle:」 
を 使え る よう に し て いま す 。 これ で 、 
内 包 す る テキ スト 要素 が 複数 行 に な っ 





「border-bottom」 で 各 リ スト の 下 に ボ  a タ グ に 「display: table-cell:」 を 指定 て も 縦 中 央 位置 を 確保 で きま す 。 
欧 語 リス ト 要 素 (url_scheme.css) 
-contactListInner lt -contactListInner lilast-childt "文字 を 縦 中 央 位置 に 指定 する */ 





padding:0px 12px: 
font-size:12px: 





border-bottom:none: 


} 





vertical-align: middle: 











background-position:left center: 








/ 各 リス ト の 下 の ボ ー ダ ー*/ 
border-bottom: 1px solid gray: 





-contactListlInner li>a{ 
display: table-cell: 





padding: Dpx Opx Opx 37px: 


background-repeat:no-repeat: 
/ ア イコ ン の サイ ズ を 指定 / 
-webkit-background-size: 30px 31Dx: 








-webkit-box-sizing: border-box: 





box-sizing: border-box: 


} 


/* 最 後 の 子 要素 は 下 の ポ ボー ダー を な くす */ 


width:100%: 
height: 45px: 





background-size: 30px 31px: 








0@ 


さら に アイ コン の 表示 で す が 、「 お 問 
い 合わ せ 先 」 の リン ク は 背景 画像 で ア 
イコ ン を 表示 し て いま す 。 こ こ で は 3 
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つの a タ グ か ら 同 じ ア プリ ケー ショ ン 
に 連携 させ て いる の で 、 属 性 セレ クタ 
の 条件 で ある E[foo^="bar"] を 使う こ 
と に より 、 も し リン ク 先 で 使い た い ア 
プリ ケー ショ ン が 変更 され て も HTML 


側 で は 更新 の 必要 は あり ませ ん 。 こ こ 
で は 「href 要 素 が 〇 〇 で 始ま る と き 」 
と いう 指定 で 「[href^="mailto"]」 と 
記述 し て いま す 回 還 。 





MEM0 


属性 セレ クタ の 条件 に は 3 種類 あり ます 。「^」 は 指定 し た 条件 で 始ま っ て いる 場合 、「$」 は 
指定 し た 条件 で 終わ っ て いる 場合 、「*」 は 指定 し た 条件 が 含ま れ て いる 場合 で す 。 








09 | カス タム URL スキ ー ム と 文字 量 の 変化 に 対応 で きる リス ト 





アイ コン の 表示 (urL_scheme.css) 








_/* 属 性 セレ クタ で 表示 する アイ コン を 変え る ツ / contactListinner lsahref*='tet' 


-contactListInner li>ahref^="mailto"]( 








background-image: ur./images/no2_icon_02.png): 





background-image: url(./images/no2_icon_01.png): } 





の 


続い て 「SMS を 書く 」 以 下 の リ スト で 
す が 、 大 ま か な CSS は 「 お 問い 合わ せ 
先 」 の 中 身 と ほぼ 同じ 作り で す 加 語 
図 胃 。 こ ちら は アイ コン を img タグ で 


表示 し て いま す が 、 背 景 画像 で 指定 し 
て も 構い ませ ん 。 こ こ で は リス ト の テ 
キス ト が 長い も の が あり 、 そ の 改行 を 
「@media screen and (orientation: 
landscape)」 で コン トロ ー ル し て いま 
す 。 ス マー ト フ ォ ン を 横向 き で 見 て い 


TSMS を 書く 」 以 下 の リ スト (urL_scheme-css) 




















メデ ィ ア クエ リ を 使い 端末 の 向き で 改行 を 。 )} 
調整 7 謀 @media screen and (orientation:portrait) { 
@media screen and (orientation:landscape){ 。  .toggleBRt 上 
.toggleBR{ display:inline: 
display:nonei } 
} } 








る と き は 「orientation:landscape」 と 
な り 、 改 行 タ グ を 囲ん で いる span タ 
グ が 表示 され ず 、 縦 で 見 て いる と き は 
「orientation:portrait」 と な る の で 、 任 
意 の 位置 で 改行 で きる 仕組 み で す 。 














「SMS を 書く 」 以 下 の リス ト 





SMS を 書く 


Map を 見 る 


: 場所 を 検索 


Map を 見 る 
: 経路 を 検索 


レシ プ 15 レモ ゴ 5 タ 5 パク 月 は の 
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最後 に カス タム URL スキ ー ム 騙 還 を 
記述 し ます 。 URL スキ ー ム の 後に 最初 


カス タム URL スキ ー ム の 種類 


の 値 を 記述 し 、 最 初 の オプ ショ ン の 前 
に 「2」 を 入れ 「=」 で 要素 を 指定 し ま 
す 。 2 個 以上 オプ ショ ン が ある 場合 は 
「&」 で 連結 し ます が 、 リ ンク させ る ア 


プリ ケー ショ ン に よっ て 記述 方 法 が 微 


妙 に 異な り ま す 。 以下 で 一 部 の 記述 例 


を 紹介 し ます が 、 詳 し く は サン プル フ 
ァイル を 参考 に し て くだ さい 。 





レア ルン レス クノ) 1 




















| | cc | CC の 宛先 

| b BCC の 宛先 
メー ル mailto: | 宛先 の アド レス | こう | 

| | subject | メー ル の 件 名 

body | メー ル の 本 文 

電話 te | 電話 番号 ーー 計 
SMS / MMS sms: | 宛先 の アド レス ーー 

| 旧 | 検索 する 場所 
Google Maps | maps: | 特に な し | daddr | 出発 地点 

| 
| | | saddr 到着 地点 

Twitter ー twitter: ー 」 //post | message | 投稿 の 本 文 

//publish/ | text | 投稿 の 本 文 
Facebook fb: | | T 

//feed | フィ ー ド を 見 る 


1 





* の つい た カス タム URL スキ ー ム は 、Android 端末 で は 機能 し な い 場 合 が あり ます 。 
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CHAPTER 02 





ユー ザー イン ター フェ イス 


11 

た と えば クリ ッ ク す る と タイ トル と 本 
文 つ き の メ ー ル を 立ち 上 げ る 場合 は 、 

「mailto:」 の 後に 送信 させ た い ア ドレ 
ス 、 そ の 後に 「?subject= タ イト ル 」、 


回 設 ] カス タム URL スキ ー ム の 記述 例 (メー ル ) 


その 後に 「&body= 本 文 」 と な り ま す 。 
また 日 本 語 で の 指定 で も 動き ます が 、 

極力 URI 形式 へ ヘ エ ンコ ー ド し て 記述 し 
まし ょ う 。 この 場合 の カス タム URL 
スキ ー ム は 「mailto: 送信 さ せ た い アド 
レス ?subject= タイ トル &body= 本 文 」 


の よう に な り ま す 。 この 日 本 語 部 分 を 
URI 形式 ヘ エ ンコ ー ド し て 、href 要 素 
に 記述 し まし ょ う 。 

CC や BCC の アド レス を 指定 する 場合 
は 、 玉岡 の よう に な り ま す 。 


<a href="mailto:test@tets.com2cc=shop@example.com&bcc=e_shop@example.com&subject=%E59%BA%979%E89%6889%6979%%E3968196AB%E99%96 
%A2%E39%819%97%E3%81%A6&body=%E69%%9C9%AC%E69%969%87"> 店 舗 に 関し て </a> 


も う 1 つ の 例 と し て Google Maps へ の 
リン ク を 書い て み ま し ょ う 。 場所 を ピ 
ン で 指定 する だ け で な く 、iPhone の 
「 現 在 地 か ら 目 的 地 へ 」 の 経路 検索 
攻 還 も カス タム URL スキ ー ム か ら 可 
能 で す 凡 調 。 ま ず 「maps:」 の 後に 到 
着地 オプ ショ ン 「daddr」 と 到着 地 ( 東 
京 タ ワー) の 緯度 と 経度 を 「=」 で つ 
な ぎ ま す 。 さら に 出発 地 オ プシ ョ ン 


本 応 カス タム URL スキ ー ム の 記述 例 (経路 検索 ) 


「saddr」 に 「 現 在 地 」 と 指定 し て (URI 
形式 ヘ エ ンコ ー ド )、 同 じ く 「=」 で つ 
な ぎ ま す 。 これ で 出来 た カス タム 
URL スキ ー ム 「maps:daddr=35.6584 
99,139.74553&saddr=%E7%8F%BE 
%E5%9C%A8%E5%9C%B0」 を クリ 
ッ ク す る と マッ プ が 立ち 上 が り 、 現 在 
地 か ら 目 的 地 ま で の 経路 検索 結果 が 表 
示さ れ ま す 。 た だ し 、 こ ちら は 残念 な 
が ら Android で は リン ク さ れ ま せん 。 


<a href="maps:daddr=35.658499,139.74553&saddr=%E79%8F%BE9%E59%9C9%A89%%E5969C%B0"> 
<figure><img src="images/no2_icon_04.png" alt=""></figure> 
<h2>Map を 見 る <span class="toggleBR"><br></span> : 経路 を 検索 </h2> 


<7a> 


k ハイ アッ ト 東 不 
島 


麻布 高 
日 本 赤十字 社 
1 殿 太 セラ ター 
* 
js 諸 


イ 検索 





まとめ [CONcLUSION] 


[の 3 ん: ニョ AE: コ ニ レ きま - 色 竹 だ さ ン 3 


MIEi り ENAEI り CH 虹 < に 折 EDU/UIGDCRIRKc だ さき の 
「display:table-cell:」 を 使っ た リス ト は メリ ッ ト が 2 
つ あ り ま す 。 中 の 文字 量 を 問わ ず 縦 中 央 位置 に で きる 
京 と 、 横 に 並べ る こと が で きる 点 で す 。 実務 で は デザ 
イン フィ ックス 後に 文字 の 量 が 変わ る こと が 多々 あり 
ます が 、 こ の 方 法 だ と その よう な 場合 で も 柔軟 ! 

で きま す 。 

また 改行 位置 も 、 任 意 の 位置 で 改行 し た X 行 を そ 
り た 生 る k を : み 生還 そる: コロ ly だ ささ の 


Pe の セト と たく 1 の っ だ 

ます 。 

今回 の メデ ィ ア クエ リ は 特殊 な 使い 方 で す が 、 
し で て くだ さい 。 さち に 


スタ ム URL ス キー ム は サイ 
ト の お 問い 合わ せな ど で 従 来 使わ れ て きた 「mailto: 
だ け に と ど ま ら ず 、 ス マー ト フ ォ ン な ら で は の アプ リ 
を 活用 する こと で ユー ザー の 反応 を よく する こと が で 
きる は ず な の で 、 ぜ ひ 活 用 し て くだ さい 。 
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シレ アジ ルン ルン 
タイ ボ グ ラ フィ 


ビジ シン ルル メン レス ソル ルー アル に エコ ラン ル に コ 
border-image を 活用 し た ポラ ロイ ド 風 の フレ ー ム 
マス ク 効 果 を 利用 し た 印象 的 な グラ フィ ッ ク 

Web フォ ント で テキ スト を 華やか に 彩る 

だ ト ネ イ ン ル 全学 3 と 生 ヨ の た ヒュ エン ン ル ルコ 

(4 呈 IE いり ん たる: と 各 和 人 生 っ achY4/3: ロ と ゅ * 生 北 池 | 
画像 の 重ね 合わ せ で 実現 する さま ざま な 背景 
DropCaps を 使っ た 雑誌 風 の テ キス ト 表 現 
ドロ ッ プ シャ ドウ 効果 で 写真 に アク セン ト を つけ る 
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7 ヨコ に 1K) 
レル アジ ルス レル シル ン レア 


イン タラ クシ ョ ン の ある 
アウ と ョ エン リピ 





transform を 用 いて 、 サム ネイ ル 画 像 を 
Photo 【e チ 11『3S7 効果 的 に 見 せる フォ ト ギ ャ ラリ ー を 作成 
じ ま す 。 

また 、transform と transition の 組み 合 
わせ に より 、CS55 の み で サム ネイ ル が マ 
ウス に 反応 する 効果 を 作成 し ます 。 


制作 ・ 文 河原 . 覚 - (株 式 会 社 アー ク フ ィ リア ) 





制作 の ポイ ント 


時 transform に よる 回 転 ・ 拡 大 ・ 移 動 

IMIYICReF1ITSI transition の 利用 

時 プロ グレ ッ シ プ ブ ・ エ ン ハ ンス メン ト を 
考慮 し た 設計 





対応 プラ ウザ 


IE  ) PE safari 5 以上 | 





| Firefox > 8 以上 Chrome 〉 16 以上 | 


※IE で は transform、.transition の 効果 に 対応 し て 
いま ぜん 。 
サム ネイ ル の 配置 に 動き を つけ る transition に よる アニ メー ショ ン 
transform を 利用 し て 散ら ば っ た よう な レイ アウ ト を 作り ます 。 transition に よっ て transform の 変化 を アニ メー ショ ン さ せま 
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碁 本 の レイ アウ ト を 作成 する 


角 | 
サム ネイ ル を 作成 し ます 。 本 作例 で は 
サム ネイ ル に 触れ て いな いと き は 横 
160x 縦 120px、 拡 大 時 に は 横 320x 縦 
240px と な る よう に し ます 。 拡 大 後に 
画像 を 綺麗 に 見 せ する た め 、 サ ムネ イル 
画像 は 拡大 後 の 大 き さ ( 横 320x 縦 
240px) と し て 書き 出し て お きま す 。 

HTML は ul を 使っ て コー ディ ング し 、 
各 サ ムネ イル は 後ほど 個別 に 効果 を 設 
定 す る の で 、id を 振っ て お きま す 回 同 。 


回 呈 HTML 


<ul id="Gallery"> 





<li id="Photo01"><a href="#><img src="images/photo01_thumb.jpg" alt=""></a></li> 


<li id="Photo02"><a hre に "#"><img src='images/photo02_thumb.jpg' alt=""></a><7li> 


省略 


<li id="Photo10"><a href=" 馬 "><img src='images/photo10_thumbjjpg* alt="></a>< 人 (> 


</ul> 


CS5 を コー ディ ング し て いき ます 。 本 
作例 で は 、 装 飾 の た め に box-shadow、 
transform、transition を 利用 し て いき 
ます が 、 ブ プラ ウザ の バー ジョ ン に よっ 
て 対応 状況 に 差 が あり ます 。 

ここ で は 、 対 応 状況 に 応じ た 4 段階 で 、 
少な く と も 表示 が 崩れ な いよ うな 設計 
を 考え て 進め て いき ます 攻 重 。 


プラ ウザ の バー ジョ ン ご と に 対応 する 段階 


対応 状況 も 


css3 に 対応 し て いな い 
box-shadow に 対応 
transform に 対応 
transition に 対応 


単純 な グリ ッ ド 表示 
サム ネイ ル に 影 が つく 
ば ら つ いた 効果 と 、 ホ バー 


ホバー 効果 が アニ メー ショ ン 


まず は 、 サ ムネ イル が グリ ッ ド 状 に 並 
ん で いる レイ アウ ト に な る よう に コー 
ディ ング し て いき ます 工 還 。 

この 状態 を transform に 対応 し て いな 


[ 民 記 この 段階 の ブ プラ ウザ 表示 


い ブ プラ ウザ で の 見 た 目 と する た め 、 こ 
の レイ アウ ト で は CSS3 の 新 機能 な ど 
は 使わ ず に 、 float を 用 いて コー ディ ン 
グ を 行い ます 。ll と img の サイ ズ は 、 と 
も に 横 160x 縦 120px に 固定 し て お き 
ます 華 罰 回 3 














diYJt 思 で た 90『 づ ゅ 7 





較 語 リス ト 


#Gallerylit 
floatleft 
_width:160px: 
height:120px: 
margin:0 20px 20px 0 
border:5px solid #fffff 
} 


に 虹 】 画像 
#Gallery U aimg 
width:160px:_ 
height:120px: 
} 
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CHAPTER 03 
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作 選 廊 #Gallery li に z-index の 初期 値 設定 を 追加 


- position:relative: 
基本 的 な レイ アウ ト が で きた ら 、 拡 大 z-index:10: 

し た と き の 重 ね あわ せ を 制御 する た め 

に 、 あ ら か じ め position:relative: と 
z-index の 初期 値 を 設定 し て お きま す 





介 医 世 鹿 #Galery li に box-shadow を 追加 


-moz-box-shadow:5px 5px 5px #000000: 


サム ネイ ル の 装飾 を 行っ て いき ます 。 -webkit-box-shadow:5px 5px 5px #000000: 
まず は 、box-shadow で 影 を 設定 し ま box-shadow:5px 5px 5px #000000: 

す 回 市 。transform に 対応 し て いな い 

が 、box-shadow を 描画 で きる プラウ 長 この 段階 の プラ ウザ 表示 


ザ で は 、 こ の 状態 に な り ま す 民 諫 。 Photo Gallery 








写真 カ 





ら ば っ て いる よう な 効果 を 














[ ] / 人 証 scale 選 rotate 
-moz-transform: scale(1.0): -moz-transform: rotate(0deg): 

次 に 、transform を 用 いて 、 写 真 が 散 -webkit-transform: scale(1.0): -webkit-transform: rotate(Ddeg): 
ら ば っ て いる よう な 効果 を 作っ て いき transform: scale(1.0): transform: rotate(0deg): 

ます 。 

本 作例 で は 散ら ば っ て いる よう な 効果 、 避 恒 translate 

お よび マウ ス が 触れ た 際 の 拡大 効果 の -moz-transform: translate(0.0): 

た め 、transform の scale (拡大 )、rotate -webkit-transform: translate(0.0): 症 ー 
(回 転 )、 translate (移動 ) を 用 いま す 。 transform: translate(0.0): 

それ ぞ れ の 基本 的 な 書式 は 工 還 時 

相 虹 本 3 の よう に な り ま す 。 じ 計 複数 の オプ ショ ン を 指定 する 場合 
scale に は 拡大 率 、rotate に は 角度 、 -moz-transform: scale(1.0) rotate(0deg) translate(0.0): 
translate に は 横 一 縦 の 順 で 移動 する -webkit-transform: scale(1.0) rotate(0deg) translate(0.0) 
距離 を 指定 し ます 。 transform: scale(1.0) rotate(0deg) translate(0.0): 
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角度 と 位置 の ブレ を rotate、 translate 
を 用 いて 設定 し て いき ます 。 散ら ば っ 
た よう な 効果 を 出す た め 、 あ ら か じ め 
振っ て お いた サム ネイ ル の id に 対し 
て 、1 つ ずつ 別 の 値 を 設定 し て いき ま 
す 。 

値 を 設定 する 際 は 、 次 ステ ッ プ の 拡大 
効果 の た め に 、scale(1.0) も 一 緒 に 設 
定 し て お きま す 回 呈 加 3。 


個別 の 効果 


#Photo01 { 





-moz-transform: scale(1.0) rotate(-10deg) translate(-6px,-3PxX): 


-webkit-transform: scale(1.0) rotate(-10deg) translate(-6px,-3px): 


transform: scale(1.0) rotate(-10deg) translate(-6px.-3px): 


] 


散ら ば っ た よう な 効果 


di で た 00【 づ ゅ 7 





マウ ス に 反応 する 効果 を 作る 


マウ ス に 反応 する 効果 を 作っ て いき ま 
す 。 マ ウス が サム ネイ ル に 触れ た と き 
に 、 回 転 と 移動 を 元 に 戻し サム ネイ 
ル を 2 倍 に 拡大 する よう な 効果 を 設定 
し ます 。 

届 の hover 擬 似 ク ラス に rotate と 
translate を 0 に 戻し 、scale を 2.0 に 設 
定 す る よう な transform を 設定 し ます 
108-1 問 








ロ 











[ じ 則 拡大 効果 


#Gallery li:hover { 


-moz-transform: scale(2.0) rotate(0deg) translate(0,0): 


-webkit-transform: scale(2.0) rotate(0deg) translate(0.0): 


transform: scale(2.0) rotate(0deg) translate(0.0): 


} 





| MEMO 


国 プロ ッ ク の 右 下 を 指定 する 例 


-moz-transform-origin: 0 10096: 
-webkit-transform-origin: 0 10096: 


transform-origin: 0 100%: 





| transform を 利用 する 際 の 回 転 や 拡大 の 中 心 点 は 、 無 指定 の 場合 、 対 象 プ ロッ ク の 横 50%、 
縦 b0% の 位置 に な り ま す 。 中 心 点 を 変更 し た い 場合 は transform-origin を 利用 し ます 人 財 
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これ で 触れ た と き の 効 果 は で きま し た 
が 、 こ の まま で は 、 拡 大 され た サム ネ 
イル が 他 の サム ネイ ル の 下 に 隠れ て し 
まっ て いま す 還 語 。 

そこ で 、hover の スタ イル に z-index を 
設定 し ます 。 こ こ に 設定 する z-index 
は 、(% で 指定 し た z-index より も 大 き 
いも の に し ます 葉 語 。 

ここ まで の スタ イル が 、transform に 
対応 し て いる プラ ウザ の も の と な り ま 
す 加 語 。 


区 記 中 央 の 画像 が 他 の サム ネイ ル に 隠れ て いる 


IiTUYOR で FE10『 づ っ 7 





区 記 z-index の 設定 


#Gallery li:hover { 


-moz-transform: scale(2.0) rotate(0deo) translate(0.0): 


-webkit-transform: scale(2.0) rotate(0deg) translate(0.0): 


transform: scale(2.0) rotate(0deg) translate(0,0): 


z-index:100: 


区 評 中 央 の 画像 が 他 の サム ネイ ル よ り も 上 に な っ た 


Photo Gallery 


transition 対応 ブラ ウザ 向け の アニ メー ショ ン 効 果 を 設定 する 





U 


最後 に 、transition に 対応 し て いる ブ 
ラウ ザ 向 け の アニ メー ショ ン 効 果 を 設 
定 し ます 。 

transition は 通常 の 状態 か ら hover 状 
態 な ど 、 状 態 間 の スタ イル の 違い を ア 
ニメーション させ る た め の ス タイ ル で 
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す 。 サ ムネ イル の 各 状 態 に 設定 され た 
transform ス タイ ル の 違い を 、 
transition に よっ て アニ メー ショ ン さ 
せま す 。 

transition の 基本 的 な 記述 は 騙 還 の よ 
うに 、 ア ニメーション させ た い プ ロ パ 
ティ 名 、 秒 数 、 イ ー ジ ング を 順に 指定 
し ます 。 


話 還 transition の 基本 的 記述 


-moz-transition: all 1.0s linear: 
-webkit-transition: all 1.0s linear: 


transition: all 1.0s linear: 


史生 回 国 指 十 で きる イー ジン グ キ ー ワ ー ド 
_ キー ワー ド 効果 
transition の 3 つ 目 の オプ ショ ン で あ linear 一 定 の 速度 
る イー ジン グ で は 、 ア ニメーション の ease | 滑ら か な 変化 
変化 速度 を 指定 し ます 。 本 作例 で 指定 eS 0 還 向 し い 素 〒 く ア 
し て いる ease-out は 、 ア ニメーション ease-out | 素早 く 開始 し 、 ゆ っ くり と 終了 
ゆっ くり と 開始 し 、 素 早く 変化 し 、 ゆ っ くり 終了 


ease-In-Out 


が 終わ り に 近づく に つれ て ゆっ くり に 
な る 効果 で す 。 

イー ジン グ の 値 と し て あら か じ め 動 き 
が 決め られ て いる キー ワー ド に は 、 
語 還 の よう な も の が あり ます 。 





#Galleryli{ 
サム ネイ ル の アニ メー ショ ン は float:left: 
transform を ター ゲッ ト と し 、0.2 秒 で width:160px: 


イー ジン グ に ease-out を 指定 し ます 。 height:120px%: 


コー ド は 駐 罰 の よう に な り ま す 。 
アニ メー ショ ン 対 象 の プロ パテ ィ を 指 
定 す る 際 に も ベン ダー プレ フィ ックス 3 
が 必要 に な る の で 、 注 意 が 必要 で す 。 
以上 で 、 完 成 と な り ま す 蓄 廊 。 


position:relative: 


z-index:10: 


アニ メー ショ ン 


まとめ [CONcLUSION] 


ロー ルオ ー バ ー と ロー ルアウ ト な ど 、 状 態 の 居 移 に 関 
する アニ メー ショ ン は 、 以 上 の よう に スタ イル シー ト 
だ け で も 実装 する こと が で きま す 。 サ ムネ イル の 数 が 
増減 し て も 、 ア ニメーション を 設定 し 直す 必要 が な い 





最終 的 な #Gallery li 


margin:0 20px 20px 0: 
border:5px solid ffff: 


















01 | イン タラ クシ ョ ン の ある フォ ト ギ ャ ラリ ー 


-moz-box-shadow:5px 5px 5px #O00000: 
-webkit-box-shadow:5px 5px 5px #000000: 
box-shadow:5px 5px 5px #000000: 


-moz-transition:-moz-transform 0.2s ease-out: 


-webkit-transition:-webkit-transform 0.2s ease-out: 


transition:transform 0.2s ease-out: 








と ころ も メリ ッ ト と な り ま す 。 

し か し 、 す べ て の 環境 で は 動作 し ませ ん の で 、 プ ログ 
レッ シブ ・ エ ン ハ ンス メン ト を うま く 設 計 し た うえ で 
活用 する の が よい で し ょ う 。 


レル レア だ ジル スル を シン アル 


border-image を 活用 し た 
ボ ポラ ロイ ド 風 の フレ ー ム 





これ まで は 、border の スタ イル と いえ ば 


1Pjnome Pie 実線 や 点線 、 破 線 や ニ 重 線 な ど が メイ ン 
きょう は ホワ イト デー 時 で し た 。 し か し 、 CS53 の border-image 
0"aeEaezseocas を 使え ば 、border に 画像 を 使え る よう に 

に も な り ま す 。 複雑 すぎ て CS5S で は 実現 で き 
な か っ た よう な デザ イン を 、border-image 
を 上 手 に 使っ て 実装 し て み ま し ょ う 。 


制作 ・ 文 山田 敬 美 


Hgy (4 D み ダ / 制作 の ポイ ント 


wozremspusue 2 財 「border」 と いう 言葉 に と ら わ れず 、 
自由 な 発想 で 使っ て みる 


時 4 つの border-image プ ロ パ ティ を 1 
つ ず つ 理 解す る 


時 ほか の プロ パテ ィ と の 組み 合わ せ で 、 
リッ チ な デザ イン に 対応 


IE 対 ) | | Safari DX , | 








Firefox | |Chrome > | 


※IE10 Platform Preview で も 非 対 応 。 
※IE で は 表示 内 容 の アク セ シ ビ リティ は 確保 され ます 。 


Web フォ ント と の 組み 合わ せ で ポラ ロイ ド 風 に 複雑 な デザ イン も 1 つの 要素 で 簡単 に 実装 


border-image で フレ ー ム を 、 複雑 な 形 の シャ ド 
Web フォン ト で 手書き 文字 を 288 ウ や 光沢 な ど 、 再 
再現 し て 、 本 物 の ポラ ロイ ド 現 が 難し い デ ザイ 
写真 の よう な フレ ー ム を 作る ン も 画像 | 枚 で 実 
こと が で きま す 。 装 で きま す 。 











張 


Hey (4 Dz 


y ジ 
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1 


縦横 可変 サイ ズ の 画像 フレ ー ム を 作る 
場合 、 こ れ ま で は 、backqround-image 
を 使っ て 背景 画像 を いく つも 組み 合わ 
せる 必要 が あり まし た が 、border- 
image な ら 1 つ の 要素 で シン プル に 実 
装 で きる よう に な り ま す 回 還 。 





* ラ ロイ ド 風 


上 














border-image を 使い 、 写 真 の 周囲 を 
ポラ ロイ ド 風 の フレ ー ム で 装飾 し ます 
区 記 。 基 本 と な る HTML は 取調 の 通り 
で 、 無 駄 な 要素 が な い シ ンプ ル な 構造 
と な っ て いま す 。 


まず 、 フ レー ム に な る 画像 URL を 指定 
し ます (border-image-source) 医 廊 
区 衣 。border-image を 実装 する 際 は 、 
甘 還 の よう に 画像 を 9 分 割 し 、 そ れ ぞ 
れ の 区 画 に 対し て 処理 を する と いう イ 
メー ジ を 持つ と わか りや すく な り ま す 。 





MEMO0 
(m 届 の 、①③⑦⑨ 部 分 は 画像 が 固定 


| 
| 
され 、 ②④(⑥⑧ 部 分 は 繰り 返す (また は 














引き 伸ばす ) 部 分 で す 。 今 回 は 繰り 返し 
に する た め 、②④⑥⑧ が それ ぞ れ リ ビ 
ー ト で きる よう な 画像 を 作成 し て お く 必 
要 が あり ます 。 





iPhone Pie 


border-image の 概要 


貞 司 ] 画 像 フレ ー ム を 実装 する 方 法 の 比較 


比較 内 容 
縦横 に 伸縮 する ボッ クス に 、 


background-image 
要素 を 何 重 に も 入れ 子 に 


border-image 


必要 な 要素 は 1 つの み 





画像 フレ ー ム を 実装 する する 必要 あり 
| | ボッ クス サイ ズ に 合わ せ て 、 プ ラウ ザ 
ポッ クス サイ ズ が 、 画 像 の 可 り | 中 で 切れ る | 区 で 画像 サイ ズ を 調整 する た め 、 画 像 


| が 途中 で 切れ な い (border-image- 


返し サイ ズ の 倍数 で な い 場 合 | 
| repeat が round の 場合 ) 


デフ ォ ル ト 設 定 で は 印刷 さ 
れ な い 


Web ペー ジ の 印刷 border と 同じ よう に 印刷 され る 





ベー ス の HTML 


<figure> 
<img src="macaron.jP9"> _- 
<figcaption>Happy White Day :)</figcaption> 


</figure> 





フレ ー ム に な る 画像 [に 7 分 割 の イメ ー ジ 


] 本 
| 


③① ②@ 
④ --⑤.:- ⑥ 





border-image-source の 値 を 指定 


figure { 
display: inine-block: ⑦ ⑨ 

= -webkit-border-image: url(frame.-png): 
-moz-border-image: url(frame.png): 





-o-border-image: urU(frame.png): 





border-image: url(frame.png): 
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04 


プラ ウザ は 、1 枚 の 画像 か ら ど の よう 
に 区 画 を 分 けれ ば よい か 判断 で きま せ 
ん 。 そ の た め 、 上 下 左右 の 枠 に な る 部 
分 の サイ ズ を CSS で 指定 する 必要 が 
あり ます (border-image-slice) 葉 証 。 
指定 方 法 は 、「 上 、 右 、 下 、 左 」 の 順に 、 
数 値 を 単位 を つけ ず に 記述 し ます 国語 。 
た だ し 、 サイ ズ が 同じ 場合 は 、「 上 、 左 
右 、 下 」「 上 下 、 左右 」「『 す べ て 」 の よ 
うに 短縮 し て 記述 する こと も 可能 で す 。 











border-image-slice の 値 を 指定 





figure { 





display: inline-block: 
-webkit-border-image: url(frame.png) 40 40 90: 
-moz-border-image: urlframe.png) 40 40 90: 











-0-border-image: url(frame.png) 40 40 90 40: 





border-image: url(frame.png) 40 40 90: 





























} 

則 border-image-width の 値 を 指定 
figure { 

border の 太 さ を 指定 し ます (border- display: inline-block: ーー 

image-width) c border-image-slice -webkit-border-image: url(frame.png) 40 40 90 / 40px 40px 90px: 

の 値 の 後に スラ ッシュ (/) を 挟み 、 -moz-border-image: url(frame.png) 40 40 90 / 40px 40px 90px: 。 

「 上 、 右 、 下 、 左 」 の 順に 記述 し ます -o-border-image: url(frame.png) 40 40 90 40 / 40px 40px 90px 40pxi も 

CE2。 border-image-slice で は 単 0 border-image: ur(frame.png) 40 40 90 / 40px 40px 90px: 





位 は 不要 で し た が 、border-image- 
width で は 単位 が 必要 で す 。 ま た 、 ス 
ライ ス サ イ ズ と 同様 に 、「 上 、 左 右 、 
』。。「 上下 、 左右 」、「 す ペ べ て 」 の よう 
に 短縮 する こと も 可能 で す 。 


[3 ②④@⑥⑧ の 繰り 返し 部 分 が 
引き 伸ばさ れ た 状態 と な る 








MEMO0 


border-image-width の 値 は px 以外 に も 、 
パー セン テー ジ や 倍数 、「auto」 キ ー ワ 
ー ド も 用 意 さ れ て いま す が 、 プ ラウ ザ の 
対応 状況 が まち まち で ある た め 、 px で 指 
定 し て お く 方 法 が 無難 で す 。 
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| | 
UUJ(C 


border-image は 、 工 調 の ② ⑧ き 
分 を 繰り 返す こと に より 、 縦 横 可変 サ 
イズ に 対応 で きる 仕組 み と な っ て いま 
す 。 そ れ を どの よう に 繰り 返す か を 指 
定 す る の が 、border-image-repeat で 
す 。 

指定 で きる キー ワー ド は 「stretch」、 
「repeat」、「round」、「space」 の 4 種 
類 あ り 、 そ れ ぞ れ 加 還 の よう な 仕様 と 
な っ て いま す 。 今回 は 、 角 の 継ぎ 目 を 
わか ら な くさ せ た い た め 、「round」 を 
指定 し ます 区 廊 。 











ロ 











MEM0 


「stretch round」 の よう に 、「 上 下 、 左 
右 」 の 2 つ に 分 け て 指定 する こと も で き 
ます 。 


06-3106-4 








に た ガリ の ) 





border-image に 関す る 指定 は 以上 で 
す 。 こ こ か ら は 、 キ ャ プシ ョ ン に 対す 
る 指定 を 行い ます 。 

まず 、Google Web Fonts 還 を 利用 
し 、 キ ャ プシ ョ ン の テキ スト を 手書き 
風 フ ォ ン ト に 変更 し ます 回 2 3。 








Google Web Fonts 


http://www.google.com/ 
webfonts/ 


レン レス っ 】 と 


Pihone Pie 


ラロ イド 風 の フ レー ム ーー 





DB2 | border-image を 活用 し た 


border-image で 指定 で きる キー ワー ド 


キー ワー ド | 説明 
stretch | 画像 が 引き 伸ばさ れる 。 初期 値 


画像 が 繰り 返さ れる 。 ポ ボッ クス サイ ズ が ②④⑥⑧ そ れ ぞ れ の 倍数 で な い 場合 、 画 
中 Mg 像 は 途中 で 切れ る 。 
画像 が 繰り 返さ れる 。 ボ ックス サイ ズ が ②④⑥⑧ そ れ ぞ れ の 倍数 で な い 場合 、 う ま 
く 収 まる よう に 画像 が 拡大 ・ 縮 小さ れる 。 
画像 が 繰り 返さ れる 。 ボ ックス サイ ズ が ②④(⑥(⑧ そ れ ぞ れ の 倍数 で な い 場合 、 余 
0 っ た スペ ー ス が 画像 の 周囲 に 分 配 さ れる 。 


round 





border-image-repeat の 値 (キー ワー ド ) を 指定 


figure { 








display: inline-blocki ニー ーー 


-webkit-border-image: url(frame.png) 40 40 90 / 40px 40px 90px roundi: 


-o-border-image: url(frame.png) 40 40 90 40 / 40px 40px 90px 40px roundi 


border-image: url(frame.png) 40 40 90 / 40px 40px 90px roundi 


Firefox で の 表示 。 四 隅 が 
きれ い に つ な が っ て いる 


Chrome で の 表示 。 四 隅 の 
継ぎ 目 が つなが っ て いな い 














キャ プシ ョ ン に Web フ ォ ン ト 
が 適用 され た 


HTML の 記述 


<link re に "stylesheet" href="http://fonts. 


googleapis.com/css?family=Bilbo"> 


CSS の 記述 


_figure figcaption { 


| 
| 
| 
| 
| 


Line-height: 1: 
color: #333: 





white-space: nowraD: | 
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人 ⑤ border-image の 上 に テキ スト 
U)@ が 表示 され る よう 調整 4 





次 に 、position を 使い 、 フ レー ム の 右 
下 に テキ スト を 表示 させ ます 。 

figure 要素 に position:relative: を 指定 
する こと で 、figcaption を 位置 指定 す 
る 際 の 基準 要素 と し ます 。 基 準 点 は 
border の 外側 で な く 内 側 と な る た め 、 | 
figcaption の 位置 指定 に マイ ナス の 値 
を 指定 する こと で 、border-image の 



































上 に 文字 を 乗せ られ ます 区 廊 区 記 。 | 5 | 
Hp (の 4 じみ ソ 」 
ーー * 
革 ] 写真 の 右 下 を 基準 と し て 、 キ ャ プシ ョ ン の 位置 を 指定 1 
_figure 【 ie _- 本 に color: #333: 
position: relative: _ ー mm 明記 figure figcaption【 font-size: 50pxi ニニ 
_ display: inline-blocki position: absolute: font-family: "Bilbo', cursive: に 
-webkit-border-image: url(frame.png) 40 40 90/ 40px 40px 90pxround: bottom: -65pxi white-space: nowraP: 内 
_ -moz-border-image: urlframe.png) 40 40 70 ) / 40px 40px 90px roundi _ right: -10Pxi } _ 還 
-o-border-image: url(frame.png) 40 40 90 40 / 40px 40px 90px 40px roundi_ ンー ァ -index 和 * 
border-image: url(frame.png) 40 40 90 / 40px 40px 90px roundi: _Uine-height: 1: 























個 9⑨ 3 種類 の box-shadow を カン マ 区 切り で 指定 

2 figure { ーー 

キャ プシ ョ ン の 装飾 は 以上 で す 。 最 後 position: relative: ーー - ー 6 
に 、box-shadow を 使っ て 、 さ ら に ポ display: inlne-block: 思 Eee 
ラロ イド 写真 を 演出 し ます 。 -webkit-border-image: urlframe.png) 40 40 90 / 40px 40px 90px roundi 

box-shadow は カン マ (,) で 区 切る こ _ -moz-border-image: url(frame.png) 40 40 90 / 40px 40px 90px roundi 





と に より 、 複 数 の 影 を 1 つの 要素 に 指 に mn 3 me yr の round: ーー 
本 order-image: url(frame.png px 40px 90px roun 
定 で きま す 。 ここ で は 、 左 か ら 順 に 呈 


box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0.0,0.3), 3px 3px 


























「 フ レー ム と 写真 の 間 の 影 」、「 写 真 全 10px rgba(0.0.0.1 _ ーー ーーーーーー 一 
体 を 薄暗く する 影 」、「 フ レー ム 全 体 に 1 

立体 感 を 出す た め の 影 」 の 3 種類 の 影 ーー ーー 
を 指定 し まし た 避 還 。 写真 画像 が border-image より 背面 に border-image が 写真 より も 前 面 に な る 
た だ し 、border-image よ り も 写真 の 和志 oe 
方 が 手前 に な る た め 、inset で 指定 し た -photo img{ | ac | 

2 つの 指定 は 、 写 真 の 後ろ に 隠れ て し position: relative: pa 

まい ます 。 そ の た め 、 回 喘 の 指定 に よ 

り 、 写 真 画像 を border-image より も rm 





} 
背面 に 持っ て いき ます 回 還 。 EE 








Hp (の 4 じみ ソ - 
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EE 


10 


以上 で 、 ポ ラロ イド 風 の 画像 フレ ー ム 
が 完成 し まし た 。 

別 サ イズ の 画像 に も 、 同 様 に フレ ー ム 
を つけ る こと が で きま す 軌 還 。 


Phone Pie 


02 | border-image を 活用 し た ポラ ロイ ド 風 の フレ ー ム 


ポラ ロイ ド 風 の 画像 フレ ー ム の 完成 








ん ルル みみ 


チャ ッ ト ア プリ 風 の 吹き 出し を つく る 


も う ひ と つの バリ エー ショ ン と し て 、 
凝っ た デザ イン の 吹き 出し を border- 
image を 使っ て 実装 し ます 太 較 。 ベ ー 
ス と な る HTML は 丹 詳 の 通り 、 シ ンプ 
ル な 構造 で す 。 


ポラ ロイ ド 風 フレ ー ム の と き と 同 様 に 、 


画像 URL (border-image-source) を 
指定 し ます 台 。 画 像 を 9 分 割 す る イ 
メー ジ で 、②④⑥⑧ の 部 分 を リピ ー 
ト で きる よう な 画像 を 作成 し て お きま 
す 蓄 罰 。 





























軸 還 完成 例 ベー ス の HTML 
に 9 っ ms ー 
し.pg ] 
| 中" | 放 ーーーーー 
| | <P><img src="bre 
| 1 </div> = = 邊 ョ 
<!-- 文 字 列 --> 
_<div class="balloon"> ーー 
| し Es | <p> テ キス ト </p> 
| | <7div> 
] | 
に 
EE を 
border-image-source の 指定 balloon01.png 
baloont ー 園 | 
_ display: inline-block: 


max-width: 6096: | 


-webkit-border-image: url(balloon01.png): 








-moz-border-image: url(balloon01.png): 
_ -0-border-image: url(balloon01.png): 


border-image: url(balloon01.png): 


! 
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13 


スラ イス サイ ズ (border-image-slice) 
と border の 太 さ (border-image- 
width) を 指定 し ます 。 馬 玉 の 図 の 通 
り 、 す べ て の 辺 の サイ ズ が 異な る た め 、 
工 衣 の よう に 「 上 、 右 、 下 、 左 」 の 順 
で 個別 に 指定 し ます 。 


14 


Chrome で 表示 する と 、 中 央 部 分 の 画 
像 が 抜け て 透明 に な っ て いま す 芽 。 
border-image の 中 央 部 分 ( 双 調 の ⑤ 
の 部 分 ) の 画像 は 、 デ フォ ルト で は 使 
われ な い 仕 様 で ある た め 、 中 央 の 画像 
も 表示 し た い 場 合 は 、border-image- 
slice の 数 値 に 続け て 「fill」 キー ワー 
ド を 指定 し ます 証 罰 本 較 。 


fi キーワード を 追加 





balloon01.pndg の スラ イス サイ ズ 





border-image-slice と border-image-width の 指定 





-balloont 

、 display:inline-blocki 
max-width: 60%: ーー _ 
-webkit-border-image: url(balloon01.png) 15 22 17 16 / 15px 22px 17px 16px: 
-moz-border-image: url(balloon01.png) 15 22 17 16 / 15px 22px 17px 16px: 
-o-border-image: ur(balloon01.png) 15 22 17 16 / 15px 22px 17px 16px: 
border-image: url(balloon01.png) 15 22 17 16 / 15px 22px 17px 16pxi 





























選評 中 央 部 分 の 画像 も 表示 され た 








_pballoon { 


-moz-border-image: url(balloon01 png) 1 5221716 / 15px 22px 





display: inline-block: 


17px 16Px: 





max-width: 60%: 


--border-image urtballoon01.png) 15 22 17 16/ 15px 22px 17px 16px 





-webkit-border-image: url(balloon01.png) 15 22 17 16 / 15px 22px border-image: url(balloon01.png) 15 22 17 16 flL/ 15px 22px 17px 16px: 


17px 16pxi 
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テー 





リピ ー ト 方 法 を 指定 し ます (border- 
image-repeat) 。 理 論 的 に は 「strech 
や 「repeat」 で も 問題 な い の で す が 、 
Firefox で 1px 以下 の 隙間 が で きる 場合 
が あり ます 纏 証 。「round」 に する と 解 
消さ れる こと が ある た め 、 こ こ で は 
「round」 に し て いま す 駐 記 還 。 


軸 軸 Firefox で の 表示 。 右 下 と 左下 に 隙間 が 空い て いる 





border-image-repeat を round に 指定 





balloont _- 
display: inline-block: 
max-width: 6096: 


-webkit-border-image: urlballoon01.png) 15 22 17 16 7 15px 22px 17px 16px roundi 


-moz-border-image: url(balloon01.png) 15 22 17 16 / 15px 22px 17px 16px roundi 


-o-border-image: url(balloon01.png) 15 22 17 16 / 15px 22px 17px 16px roundi 





_border-image: url(balloon01.png) 15 22 17 16 fil / 15px 22px 17px 16px roundi 


} 








証 証 Firefox で の 隙間 が 消え た 


以上 で 、 チ ャ ッ ト ア プリ 風 の 吹き 出し 
の 完成 で す 。 中 に どの よう な 要素 が 入 
っ て も 、 自 由 に 伸縮 する リッ チ な デザ 
イン の 吹き 出し に な り ま し た 馬 証 。 


訳 罰 チャ ッ ト ア プリ 風 の 吹き 出し の 完成 








rder-image を Retina ディ スプ レイ に 対応 させ る 


最近 の スマ ー ト フォ ン や タプ レッ ト 端 
末 は 、 ビ ピク セル 密度 (device-pixe- 
ratio) が 1.5 や 2 で ある こと が 多く 、 等 


2 倍 サイ ズ の 画像 を 用 意 











倍 サ イズ の 画像 を その まま 使う と 洪 み 
や ジャ ギー で 表示 が 汚く な り ま す 。 
背景 画像 や img 要 素 の 場合 に は 、2 倍 
サイ ズ の 画像 を 用 意 し て お き 、 
background-size や width で 半分 に 縮 


小 し て 表示 する の で す が 、border- 
image の 場合 は 2 倍 サ イズ の 画像 を 用 
意 し 弁 罰 、border-image-width の 値 
を その 半分 に する こと で 対応 で きま す 
7-2 


border-image-slice は 2 倍 の サイ ズ で 指定 し 、border-image-width は その 半分 (表示 サイ ズ ) を 指定 する 


-balloon { 
display: inline-block: 
max-width: 60%: 


-webkit-border-image: url(./img/balloon01.png) 30 44 34 32 / 15px 2 
-moz-border-image: url(../img/balloon01.png) 30 44 34 32 / 15px 22px 1 
-o-border-image: url(./img/balloon01 -Png) 30 44 34 32. / 15px 22px 17px 16px roundi 





ZRXBXGOUId5 





PX 16px roundi 





border-image: ur【(./img/balloon01.png) 30 44 34 32 filL / 15px 22px 17px 16px roundi 
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Internet Explorer へ の 対応 状 


1@ 


この よう に と て も 便利 な border- 
image で す が 、 残念 な が ら 現 行 の IE で 
は 非 対 応 と し な っ て お り 、 さ ら に IE10 
Platform Preview で も 対応 し て いま せ 
ん 駆 還 。IE を CSS3 に 対応 させ る 
JavaScript ラ イブ ラリ を 使っ た と し て 
も 、 ま っ た く 同 じ よ うに 表示 する の は 
困難 で す 。 

JavaScript ラ イブ ラリ 「CSS3 PIE」 
華 衣 で は border-image も 対応 し て い 
ます が 、 今 回 の デモ で は 動き ませ ん で 
し た 。 





IE9 で の 表示 。 border-image の 指定 が 





まっ た く 適 用 され て いな い 
回 し お は ょ よー! 1 
弄 = aa 
信 、 婁 ご は ん ff っ て る と ころ だ か 

仙 (ーーー うら 人 WM まで も ね いい か な 
3K、 思 も きち < うど 刺 ご は ん の バ 
っ! 電 けた と こち の 委 
ぶ ^ の cesAa3 ど NN 





な に それ ひど い ! 私 ほ で レブ に バ 
ンー 細い て た よ 。 


2 








CSS3 PIE 


http://css3pie.com/ 





MEM0 


CSS3 PIE の ドキ ュ メ ント に 、border- 
image-repeat:stretch: の 場合 で し か 使え 
な い 旨 の 記載 が あり ます 。 











⑨ 
そこ で 、border-image に 未 対応 の プ 
ラウ ザ 向 け に 、border も 同時 に 指定 し 


border も 同時 に 指定 する 


_:balloon{ 


た forIE 7 
border: 15px solid #Bbd21c: 





て お く と よい で し ょ う 藍 証 葉 衣 。 ま っ 
た く 同 じ 見 た 目 に は な ら な く て も 、 そ 
の エリ ア が ほか と 区 別 さ れ て いる こと 
は 伝え る こと が で きま す 。 








background-color: 草 8bd21c\9: 








/* for Modern Browser ツ 





_ -webkit-border-imadge: ur./img/balloon01.png) 30 44 34 32 / 15px 22px 17px 16px roundi 





-moz-border-image: url(./img/balloon01.png) 30 44 34 32 / 15px 22px 17px 16px roundi 








border-image: url(./img/balloon01.png) 30 44 34 32 filL / 15px 22px 17px 16px round: 





』 


まとめ [coNcLUSION] 


border-image は いま いち 使い どこ 
横 可 変 サ イズ に 簡単 に 対 


いう 声 も ある よう で す が 、 
応 で き 、 さ ら に プラ ウザ 側 で 継ぎ 目 が わか ら な いよ う 


整 じ で ぐれ る と いう 、 


と て 


が わか ら な いと まつ: だ 和 Z 民 が 究 


WE 北 潮 3: 二 / 注 


紅 証 IE 向 け に border と background-color を 
指定 





語 
に 
還 … 
仙 の 





- 玲 ご は ん Wh っ て る と ころ だ か ら 、 10 
昼 で も いい あな せ 





な に それ どい ! 私 は で レプ に パン ケー 
貧 い て た よ 。 
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border-image を 使っ た デザ イン アイ デア 


画像 フレ ー ム 以外 で の 、border-image 
の 使い どこ ろ を いく つか 挙げ て み ま し 
よう 。 

ルー ズリ ー フ の よう な デザ イン で 高 さ 
が 可変 の 場合 、 こ れ ま で の 背景 画像 を 
繰り 返す と いう 方 法 で は 、 高 さ に よっ 
て は 穴 が 欠け て し まい 、 見 栄え が よく 
あり ませ ん で し た 。 し か し 、ci の よう 
に border-image-repeat で 「round」 
を 指定 すれ ば 、 自 動 的 に 繰り 返し 部 分 
の サイ ズ を 調整 し て くれ る た め 、 ど の 
よう な 高 さ の 場合 で も 穴 が 欠け る こと 
は あり ませ ん s 

た だ し 、Chrome と Safari で は 「round」 
に 対応 し て いな いた め 、『repeat」 と 
同じ 表示 に な り 、 高 さ に よっ て は co: の 
よう に 穴 が 欠け て し まい ます 。 


ルー ズリ ー フ の 使用 画像 


POP な ど で 使 われ そう な 、 雲 の フレ ー 
ム も 同様 に 実装 で きま す s た 
だ し 、 こ れ は 「round」 に 対応 し て い 
な い Chrome と Safari で 8 の よう に 大 
幅 に 崩れ る た め 、 実 際 の 利用 は それ ら 
に 「round」 が 実装 され た 後 が よい で 
し ょ う 。 


雲 の フ レー ム の 使用 画像 


し 


ルー ズリ ー フ の 画像 の 繰り 返し 

-looseleaf{ 
width: 300px: 
height: 400px: 
border: 20px solid #eee: /* for IE */ 
-webkit-border-image: url(looseleafpng) 17 21 21 43 / 17px 21px 21px 43px roundi 
-moz-border-image: url(looseleafipng) 17 21 21 43 / 17px 21px 21px 43px roundi 
-o-border-image: url(looseleafpng) 17 21 21 43 / 17px 21px 21px 43px round: 
border-image: url(looseleafpng) 17 21 21 43 filL / 17px 21px 21px 43px round: 


ルー ズリ ー フ の 完成 イメ ー ジ (Firefox で の 表示 ) ルー ズリ ー フ の Chrome で の 表示 


雲 の フ レー ム の 画像 の 繰り 返し 


-cloud { 
width: 200px: 
height: 150px: 
border: 20px solid #2f709d: /* for IE 7 
-webkit-border-image: url(cloud.png) 100 / 100px roundi 
-moz-border-image: url(cloud.png) 100 / 100px round: 
-o-border-image: url(cloud.png) 100 100 100 100 / 100px 100px 100px 100px round: 
border-image: url(cloud.png) 100 filL / 100px round: 


雲 の フ レー ム の 完成 イメ ー ジ (Firefox で の 表示 ) 


し 


雲 の フ レー ム の Chrome で の 表示 


で うう 
の と さ ざ , 


167 


CHAPTER 03 
レレ ル だ ジル スシ の シル レア 


邊 う マス ク 効 果 を 利用 し た 
HE ロレ シン レル レグ ん レル ん 





kd mask プロ パテ ィ で 画像 に マス ク 効 果 を 
加え る こと が で きま す 。 
背景 画像 に マス ク を か け 、 動き を 加え る 
こと で 、 単なる 画像 だ け の グラ フィ ッ ク で 
は で き な い 表現 を し て み ま し ょ う 。 


制作 ・ 文 山本 圭 助 
(株 式 会 社 ラ ナ デ ザ イン アソ シ エ イ ツ ) 


mask プロ パテ ィ の 使い 方 

アニ メー ショ ン を 使っ た マス ク の 応用 
グラ デー ショ ン を 使っ て 文字 列 で マス 
ク す る 


liE | [safari ) | 





| [chrems > | 





[F| 





※IE、Firefox で は mask プロ パテ ィ に 非 対 応 。 


マス ク 効 果 を 手軽 に 実現 動き の ある マス ク で より 印象 的 に 
背景 画像 と マス ク 画 像 景 画像 を 動か し た り 、 グ ラ デ ー シ ョ ン を つけ る こと で 、 マ ス 
を 指定 する だ け で 、 マ ク に アニ メー ショ ン 効 果 を 持た せる こと も で きま す 。 


スク 効果 を 簡単 に つけ 
る こと が で きま す 。 


" 還 e【e(e(e 目 la1(l【o) 


e【ete【e 目 に 』 
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03 | マス ク 効 果 を 利用 し た 印象 的 な グラ フィ ッ ク 記 店 


ai 0 ッ 





mask プロ パテ ィ は 、 要 素 の 背景 を マ 
スク する 画像 を 指定 する こと が で きま 
す 。 

マス ク す る 画像 還 と マス ク さ れる 背 
景 画像 回 刻 を 用 意 し て 、 男 調 の よう に 
記述 し ます 。 

する と 、 回 対 の よう に 、 マ スク が か か 
っ た 表示 に な り ま す 。 





[ 度 】 背景 画像 操 請 マス ク の 指定 


7// HTML 
<body> 
<div id="wrapper"> 
<imdg src="img/bg.jpg"> 
</div> 


</body> 


// CSS 
#wrapper{ 
-webkit-maskK-image: url(img/mask-circle.png): 


M 





mask プ ロ パ ティ を 使っ た 効果 


mask プロ パテ ィ は まだ Chrome や Safari な ど WebKit 系 の mask プ ロ パ ティ の 指定 方 法 

フラ ウツ し 205 し て いま せん の で 、VebGt の ペン クー 2C 生 「 間 
レフ ィ ッ クス を プロ パテ ィ 名 に つけ て 使用 し ます り 」。 -webkit-mask-image: 使用 する 画像 パス を 指定 

指定 方 法 は 、 背 景 を 指定 する background AE ィ に 似 リピ ー ト する 場合 は repeat、 し な い 場 合 は no- 
て いま す 。 繰 り 返 し (repeat) と 配置 (position) を 指定 Webkit-mask-repeat repeat を 指定 。 省 略 時 は repeat で す 

で きま す 0:。 

1 つ に まとめ て 記述 する こと も で きま す 0:。 











-webkit-mask-position: | 右 方 向 下方 向 の 順 で 画像 の 左上 位置 を 指定 


mask プロ パテ ィ の 使用 例 1 行 で 記述 し た 例 


-webkit-mask-image: url(mask.png): -webkit-mask: url(mask.png) no-repeat 0 10px: 
-webkit-masK-repeat no-repeat: 


-webkit-mask-position: 0 10px: 
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CHAPTER 03 





グラ フィ ッ ク ・ タ イボ グラ フィ 


02 


文字 の 画像 で 背景 画像 を マス キン グ し 
実 す s 

た だ し 、mask プロ パテ ィ は WebKtit 系 
ブラ ウザ し か 使え な いた め 、 非 対応 プ 
ラウ ザ で は マス ク す る 文字 の 画像 を そ 
の まま 使用 し ます 。 

まず 、 非 対応 プラ ウザ 用 に コー ド を 記 
述 し ます 還 。 

text-indent プロ パテ ィ で テキ スト を と 
ば し 、background プロ パテ ィ で 背景 
を 表示 させ ます 述 還 。 


非 対 応 の プラ ウザ 向け コー ド 





// HTML 





<div id="container"> 





<h1>qgood interior, good life.</h1> 





</div> 











// CSS 








ht 





height: 300px 


background: url(../img/mask-type.png) no-repeat: 





text-indent: -9999px: 





} 





非 対 応 プ ラウ ザ で の 表示 
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次 に 、 マ スク の 指定 を し ます 。 
WebKit だ け に 適用 させ る た め 、 メ ディ 
アク エリ を 使用 し て 、 ほ か の ブラ ウザ 


を 除外 し ます 屋 還 。 
min-device-pixeL-ratio は 、 画像 の 1px 
が デバ イス の 上 の 何 px に 相当 する の 
か を 特定 する 媒体 特性 で す 。 

その 最小 値 が 0 の も の 、 つ まり すべ て 


メデ ィ ア クエ リ で WebKit だ け を 指定 


の デバ イス を 指定 し て いま す 。 
ベン ダー プレ フィ ックス を つけ る こと 
で 、WebKit の デバ イス が 特定 され ます 。 





@media screen and (-webkit-min-device-pixe-ratio: 0) { 
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育 景 画像 と マス ク 画 像 を 指定 し ます 
le<110<-2104-3 崩 

2 つの 画像 が 合成 され 、 避 還 の よう に 
な り ま す 。 
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マス ク 画 像 





03 | マス ク 効 果 を 利用 し た 印象 的 な グラ フィ ッ ク 





マス ク を か ける 





[ 
| 
[ 





ht 
background: url(./img/bg-type.jpg) repeat -60px -60pxi 








-webkit-mask: url(./img/mask-type.png) no-repeat Opx px 





人 











合成 結果 


【e(e【e 目 11(-]a【e)F 


e【etele 四 | に に 











0 

単に 画像 で マス ク す る だ け で は 、 画 像 
で 切り 出し た の と 変わ り ま せん 。 ア ニ 
メー ショ ン を 追加 し て 、 マ スク の 特徴 
を より 活か し て み ま し ょ う 。 
@keyframes を 使っ て 、 ア ニメーション 
を 設定 し ます 回廊 。 現 時点 で は 、@ 
keyframes や animation プロ パテ ィ に は 、 
ベン ダー プレ フィ ックス が 必要 で す 。 
不透明 度 を 0 か ら 1 ま で 変化 させ る こ 
と で 、 フ ブフ ェ ー ド 効果 が 出 ま す 。 こ こ で 
は 、 開 始 時 に は まっ た く 見 えな い 状 態 
で 、 経過 時 間 が 75% に 達し た 時 に 完全 
に 見 える よう に 設定 し ます 。 

また 、 背景 画像 (bg-type.jpg) の 配置 
を 開始 か ら 終 了 ま で ずら すこ と で 画像 
が 移動 する アニ メー ショ ン 効 果 も 追加 
し て お きま す 。 








-75%( 


リーン レス スコ ン リ に クン < 用 


アニ メー ショ ン を 設定 する 


@-webkit-keyframes mask-anime { 
0%{ 
opacity: 0: 


証 background-position: -24px -24PX: - 
} 


opacity: lH 
} 
100% { 
。 _background-position: -60px -60px: 
1 PE 
} 
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アニ メー ショ ン を 呼び 出す 

@media screen and (-webkit-min-device-pixe-ratio: 0) { 
@keyframes で 作成 し た アニ メー ショ h1{ 
ン を 、animation プロ パテ ィ で 呼び 出 -webkit-animation: mask-anime 45: 
し ます 区 語 。 } 
これ で 、 マ スク で 切り 出し た 部 分 だ け 1 
が アニ メー ショ ン さ れる よう に な り ま 
し た 。 


CSS で アニ メー ショ ン 


@keyframes で アニ メー ショ ン を 作成 し | 、 @keyframes の 記述 
animation プロ パテ ィ で 実行 させ ます 0:。 

一 括 で 指定 する こと も で きま す ?:。name 以 
外 は 省略 時 に デフ ォ ル ト 値 が 適用 され ます 。 


@keyframes アニ メー ショ ン 名 { 
0% また は from { 
開始 。 変 更 し た い プ ロ パ ティ と 値 を 記述 。 
} 
100% また は tot 
終了 。 変更 し た い プ ロバ パテ ィ と 値 を 記述 。 


} 
} 

animation プロ パテ ィ 
animation-name: @keyframes で 指定 し た アニ メー ショ ン 名 
animation-duration: 1 回 の アニ メー ショ ン に か ける 時 間 。 単位 は s ( 秒 ) か ms (ミリ 秒 ) で デフ ォ ル ト は 0s (0 の 時 も 単位 が 必要 ) 
animation-timing-function: アニ メー ショ ン 時 の イー ジン グ 。 デフ ォ ル ト は ease 
animation-delay: 開始 まで の 待ち 時 間 
animation-iteration-count: 実行 回 数 。 デ フォ ルト は 1。inifinite で 無限 回 数 も 指定 可能 
animation-direction: 方 向 。 デ フォ ルト は normal で 一 方 方 向 。alternate で 偶数 回 目 の ア ニメーション を 逆転 
animation-fill-mode: アニ メー ショ ン 実 行 前 後に @keyframes の 09%(from) や 100%(to) に 指定 し た 値 を 適用 する か どう か 

1 行 で 指定 し た 例 


animation: name duration timing-function delay iteration-count direction fill-mode 


アニ メー ショ ン で きる プロ パテ ィ 


数 値 で 指定 する タイ プ の プロ パテ ィ や 色 指 定 の プロ パテ ィ は アニ メー ショ ン が 可能 で す 。 具 体 的 に は 、 以 下 の よ うな プロ パテ ィ 
が あて は まり ます 。 


bottom, top, left, right letter-spacing text-indent 
background-color Uine-height text-shadow 
background-position margin vertical-align 

border opacity width, min-width, max-width 
color outline-width Word-spacing 

font-size outline-offset visibility 

font-weight outline-color ァ Z-index 

height, min-height, max-height padding 
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マス ク は 文字 列 で か ける こと も で きま 
す 。 グラデーション 機能 と あわ せ て 、 

文字 列 に グラ デー ショ ン が か か る よう 
に し て み ま し ょ う 。 

通常 、 文 字 列 の 色 は color で 指定 する 
の で 、 グ ラ デ ー シ ョ ン を か けた り 画 像 
を 指定 し た りす る こと は で きま せん 。 

し か し 、mask プロ パテ ィ を 使え ば 、 指 
定 し た 画像 を 文字 列 で 切り 抜く こと が 
で きる の で 、 グ ラ デ ー シ ョ ン の よう な 
表現 が 可能 に な り ま す 。 

グラ デー ショ ン の か か っ た 画像 を 用 意 
し で も よい の で す が 、 こ こ で は 
gradient を 使っ て 、 上 か ら 下 へ 透明 に 
な っ て いく 画像 を 生成 し ます 民 凡 苔 。 


gradient の 記述 





-Webkit-gradient(inear 開始 位置, 終了 位置 from( 開 始 色 ), to( 終 了 色 ):。 


切 記 上 か ら 下 へ 透明 に な っ て いく 画像 を 生成 する 


-webkit-gradientinear left top. left bottom. from(rgba(0.0.0. 1). torgba(0.0.0.0.2)) 


-webkit-linear-gra 





webkit-linear-gradient(top, rgba(0, 0. 0. 1). rgba(0, 0, 0, 





骨 

技 で 作成 し た アニ メー ショ ン を 、 
mask プロ パテ ィ で 読み 込む よう に し 
ます 回 還 。 

これ で 、 文 字 列 が だ ん だ ん 薄く な っ て 
いく よう な 表示 に な り ま す 葬 謙 。 


画面 幅 に 応じ た 設定 ファ イル を 読み 込む 


pt 





} 


合成 結果 


-webkit-mask-image: -webkit-linear-gradient(top, rgba(0.0. 0.1) rgba(0.0, 0.0.2)): 富 ミ 


まとめ [CONCLUSION] 





だ け な の で 、 簡 
ティ ブ 性 の ある 
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レル レア ん ジル ンス レム ショ レア 


し -] アル ンス No 
テキ スト を 華やか に 彩る 





凛 六 交 牙 We ILope web 記 omes 婦 半 交 交 


CS59: 缶 


W 宮 phy refers to the use of fonrs on the World Wide Web. 


Wihen HTML was first creared,font faces and styies were controlled 









exclusively by the settings of each Web browser. There was no 
mechanism for individual Web pages to control font display until Netscape 






introduced the <font tag in 1995.which was hen standardized in the HTML2 
spccifNcation_ However,the fonr specified by the rag had to be installed on the 







users computer or a fallback font such as a browser's default sans-serif or 






monospace font。would be usedL The frst Cascading Styie Sheets specificaion was 






Published in 1996 and provided the same cpabiliGies 














Web typography refers to 
the use of fonts on the 
World Wide Web, 


for individual Web pages 。 user's computerora 
to control font display fallback font。 sudh as a 
until Netscape introduced browser's default 

the <font> tag in 1995。 sans-serif or monospace 
which was theW font. would be used 
standardized in the。HTML 
2 specifiemtion. 








When HTML was first 
created, font faces and 
styles were controlled 
exclusively by the settings 
of each Web browser 





The first Cascading Style 
Sheets specification was 
However the font published in 1996 and 
specified by the tag hed provided the same 

to be installed on the capabilities. 







There was no mechanism 





交 宙 共 We Lepe wee 有 oaes 喉 交 次 






@ 2012 We Love Web Fontsill 





テキ スト の 表現 の 幅 を 広げ る 


日 本 語 の Web フォ ント の 充実 は 今後 に 期待 する と ころ で す が 、 
英 数 字 の フォ ント は 現在 で も 多く の 選択 肢 が あり 、 使 用 する こ 
と で 表現 の 幅 が 大 きく 広がり ます 。 














朗 公 凛 交 政 We Lope wee 有 omes 押 交 交 


CS88 凍 


de Web 





eb typography refers to the usc offonts on the 
W: hen HTML was fBrsr created, font faces and styies wer controlied 
W: Hiusively by the settings of each Web browser There was no 

rmechanism for individual Web pages to conrol fonc display unti Netscape 
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Web フォン ト は プラ ウザ 上 で の 文字 の 美 
し い 表 示 や 、 画像 で し か で き な か っ た 表 
現 を 実現 可能 に し ます 。 規格 、 ラ イセ ン 
ス 、 ク ロス プラ ウザ 対策 な ど 、 実 際 の 使 
用 に は 問題 点 が 多い の が 現状 で す が 、 
Google Web Fonts API を 利用 する こと 
で 、 導 入 の 障壁 が 低く な り ま す 。 ここ で 
は Google Web Fonts API を 使っ た Web 
フォ ント の 活用 例 を 紹介 し ます 。 











制作 ・ 文 中西 祐 介 
(株 式 会 社 ワ ン ・ トゥー ・ デ テン ・ デ ザイ ン ) 


制作 の ポイ ント 


時 Web フォ ント の 現状 を 把握 する 
置 Google Web Fonts API の 利用 
置 CSS3 を 使っ て 文字 を 装飾 


IE うう P E | |safsri > 5 以上 


| Firefox ノ / PE | | chrome 〉10 以上 | 


※JavaScript 使用 時 ば IE6 か ら 対 応 .( 一 部 の 効果 に 
ほ 非 対応 )。 


画像 を 使っ た よう な 表現 が テキ スト で 可能 に 


今 ま で 画像 で し か で き な か っ た 表現 も 、 テ キス ト (Web フ ォ ン 
ト ) と CSS3 で 可能 に な り ま す (例え ば 、 作 例 の 背景 で 使っ て 
いる 「Typography」 の 文字 は 画像 で は な く テ キス ト で す )。 


mechanism 






lual Web pagee to conrol fonc display until Netscapc 
introdaced the <font> ag in 1995.which was dhen srandardized in the HTML 2 
specification_ However.the fon specifed by the ag had to be installed on the 
user's computer or a fback font. such asa browser's defaulk sns-eerif or 
monospace font、 would be used. The first Cascading Styie Sheets specihication was 
ubiiehed in 1996 and providedi the srme cshabities 


Web typography refers to forindividualWeb pages users computer ora 
to control font display 。 falbackfont such as a 
nt Netscape introduced browser's default 

the <font> tag in 1995。 sans-serif or monospace 
which was them font would be used. 


arerdized in tNeHTML Caocaang Se 


the use of fonts on the 
World Wide Web 


When HTML was first 
created, font faces and 
styies were controled 


re ha sss 2 SDCTTegfion 








フォ ント の 指定 は 、 今 まで も 回 還 の よ 
うに font-family プロ パテ ィ を 使う こと 
で 実現 で きま し た 。 し か し 、 サ イト を 
見 る すべ て の ユー ザー が 同じ フォ ント 
を コン シン ピュー ター に イン スト ー ル し で 
いな い 限 り 、 同 じ 見 た 目 に は な り ま せ 
ん 。 

Web フ ォ ン ト の メリ ッ ト は まさ に そ 
こ に あり 、 フ ォ ン ト が イン スト ー ル さ 
れ て いな い 環 境 で も サー バー に 置い た 
フォ ント を 使う こと で 、 ユ ー ザ ー の 環 
境 に 左右 され る こと な く 同 じ 見 た 目 が 
実現 で きま す 。 

Web フ ォ ン ト で 利用 で きる フォ ント 
ファ イル の 主要 な フォ ー マ ッ ト に は 、 
以下 の よう な も の が あり ます 。 


font-family に よる フォ ント 指定 





介 TTF(TrueType) / OTF(OpenType) 
デス クト ッ プ アプ リケーション で 使わ 
れ て いる フォ ー マ ッ ト 。 最 も 手軽 に 導 
入 で きる が 、 フ ォ ン ト 制 作者 が 生 の デ 
ー タ を サー バー に 上 げ る こと に 難色 を 
示し た た め 、WOFF に その 座 を 明け 渡 
まこ 台 : 避 。 

@EOT (Embedded 0pynType) 
Microsoft が Web フ ォ ン ト 向 け に 提唱 。 
Microsoft が 提供 し て いる 専用 コン バ 
ー ト ツー ル 「Web Embedding Fonts 
ToolL (WEFT)」 で 、EOT ファ イル を 作 
成す る こと が で きる 。 

@WOFF (Web 0pen Font Format) 
Mozilla が 中 心 と な っ て 提案 を 行い 、 ほ 
か の ベン ダー か ら も 賛同 を 得 て 、W3C 
に WebFonts Woking Group が 設立 さ 
れ た 。 そし て WebFonts Working 
Group で 仕様 策定 が 進め られ 、WOFF 


は W3C 勧 告 候補 に な っ た 。 そ の た め 、 
今後 の Web フ ォ ン ト の 標準 フォ ー マ 
ッ ト に な る こと が 確定 し て いる 。 
基本 的 に Web サ イト で の み 利 用 で き 、 
デス クト ッ プ アプ リケーション で は 利 
用 で き な い と し て ライ セン ス を 分 離し 
て いる 。 

信 SVG Fonts 

SVG (Scalable Vector Graphics) 形 
式 の 画像 を @font-face と font-family 
で 定義 し て 、 文 字 と し て 表示 させ た も 
の 。 SVG は XML ベー ス の ベク ター グラ 
フィ ックス 言語 で 記述 され た 画像 フォ 
ー マ ッ ト で 、Illustrator な ど を 使っ て 
SVG6 形 式 で 保存 する こと が で きる 。 


また 、 古 い ブ プラ ウザ の 対応 する フォ ン 
ト フ ァイル の フォ ー マ ッ ト は 男 語 の よ 
うに パラ バラ で す 。 





_body { 





font-family: " ヒ ラ ギ ノ 角 ゴ Pro W3". "Hiragino Kaku Gothic Pro", sans-serif: 





} 


Web フォ ント の プラ ウザ 互換 性 

















対応 プラ ウザ 

IE4 一 5 9 
虹 20e に 3 
IE8 | 
IE 9 以上 に 3 
Firefox 3.5 

Firefox 3.6 O 
Firefox 3.7 以上 〇 
Safari 3.1 一 5 O 
Safari 5.1 以上 C 
Chrome 4 て 5 O 〇 
Chrome 6 以上 り 
Opera 10 〇 
Opera 11 以上 り 
i053.x 一 4.0 3 
i0S 4.2 以 上 〇 
i05 5 以上 〇 


WOFF 

〇 に 3 ※ 
OO に 4 ※ 
【⑥) X ※ 
〇 〇 3 
メ メ x 
※ O 〇 メ 
メ 〇 
メ 〇 
メ O O 
3 ※ 〇 O 
メ O C 
3 1 O 
※ O O 
し 3 3 O 
メ メ は 

※ O O 
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Web フォ ント を 使う に は @font-face で 
フォ ント ファ イル を 指定 し ます が 、 各 
ブラ ウザ に 対応 する に は 詳 の よう に 
複数 の フォ ー マ ッ ト を 指定 する 必要 が 
あり ます 。 

ここ 最近 で は 、 今後 Web フォ ント の 標 
準 フ ォ ー マ ッ ト と な る こと が 確定 し て 
いる WOFF が 注目 され て いま す 。 こ の 
フォ ント 形式 に は 3 つの 利点 が あり ま 
す 。 


・ フ ォ ン ト デ ー タ が 圧縮 され て いる た 
め 、 読 み 込み が 速い 。 

・XML ベ ー ス の 情報 が 付加 され て い 
る 。 こ れ に は フォ ント の ファ ウン ダリ 


抽選 | 複数 フォ ー マ ッ ト の フォ ント 指定 
@font-face { 
_font-family: example': 
src: urU(GraublauWeb.eot): /* IE 用 7 


src: local('example'), /* フォ ント が ロー カル に イン スト ー ル され て い 


る 場合 の た め の 指定 7 


(開発 会 社 ) 名 や URL、 著 作 権 な どの 
細か な 情報 な ど が 盛り 込ま れ て いる た 
め 、 ラ イセ ンス 情報 が 明白 。 

・ 新 し い フ ォ ー マ ッ ト で 基本 的 に オー 
プン ソー ス で ある た め 、 同 じ く オー プ 
ン ソ ー ス 開発 で ある Firefox な ど に と 
っ て 扱い や すい 。 


対応 ブラ ウザ が 最近 の も の だ け で よ け 
れ ば 、 回 届き の よう に WOFF 形 式 だ け を 
指定 し ます 。 

その ほか に 、 注 意 し な く て は な ら な い 
点 は や は り ラ イセ ンス の 問題 で す 。 サ 
ー バ ー に フォ ント ファ イル を アッ プロ 
ー ド し CSS で ファ イル の パス を 指定 





し て 利用 する た め 、 フ ォ ン ト フ ァイル 
を 勝手 に ダウ ン ロ ー ド する こと が で き 
ます 。 こ の よう に リス ク が 大 きい た め 、 
フォ ント ファ ウン ダリ (開発 会 社 ) 側 
が 指定 する ライ セン ス に 細心 の 注意 を 
は ら う 必要 が あり ます 。 

Web フ ォ ン ト は 使い よう に よっ て は 
表現 の 幅 が 大 きく 広がる お も し ろ い 技 
術 で す 。 し か し 、 ア ンチ エイ リア ス は 
プラ ウザ 依存 で 、 日 本 語 フ ォ ン ト は 英 
数 字 に 比べ 文字 数 が 多い た め デ ー タ 量 
が 大 きく な る こと と 、 ラ イセ ンス の 問 
題 で 選べ る 数 が 少な く な っ て し まい が 
ち で す 。 こ うい っ た デメ リッ ト を 考慮 
し た 上 で 導入 する 必要 が あり ます 。 


WOFF 形 式 だ け の フォ ント 指定 


@font-face { 


font-family: example: 。 。 
url(example.woff) format('woff): /* woff 形 式 (IE9, Firefox3.6+, 


} 


url(example.otf) format(opentype): /* Firefox, 0pera, Safari 用 */ body { 


} 
bodyt 
_font-size: 14pxi 


font-size: 14Pxi 


Chromee+, Safari5.1+, 0pera11.10+) 7/ 


font-family: example: /* @font-face で 定義 し た フォ ント 名 を 指定 ッ 


line-height: 1.5: 


font-family: example: /* @font-face で 定義 し た フォ ント 名 を 指定 / } 


line-height: 1.5: 
} 


Google Web Fonts の 使い 方 


02 


前 述 し た クロ スプ ラウ ザ 、 ラ イセ ンス 
な どの 問題 点 を 考慮 する と 、Web フォ 
ント は 導入 障壁 が 高い で す 。 そ こ で 、 
Google Web Fonts API の 出番 と な り ま 
す 。 こ の API を 利用 する と 、 ア クセ ス 
時 に 利用 し た プラ ウザ に 適し た フォ ン 


Google Web Fonts 


ト フ ァイル を 適用 し て くれ ます 。 
クロ スプ ラウ ザ を クリ ア に し 、 ラ イセ 
ンス も 明記 され て いる た め 、 そ れ ら に 
則 れ ば 問題 あり ませ ん 。 日 本 語 フ ォ ン 
ト が な いと いう デメ リッ ト が あり ます 
が 、 導 入 障壁 を 下げ て くれ る こと は 言 
うま で も あり ませ ん 。 

Google Web Fonts API は Web で 扱う 


http://www.google.com/webfonts/#HomePlace:home 
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フォ ント を ホス ティ ング する サー ビス 
で 、 利 用 し た い フ ォ ン ト を 選ぶ だ け で 、 
HTML と CSS に 記載 する コー ド を 生成 
し て くれ ます 。 利 用 する に は 、 ま ず 
葉 還 の URL に アク セス し 、「Start 
choosing fonts.」 ボ タン を クリ ッ ク し 
ます 隊 較 。 


EE 


や うふ 


WMCSSce = 





k 0 0 


EE 


E 評 Google Web Fonts の 利用 開始 画面 








Goosle webfonts EC エエ ーー 革 還 
& る を & & さ & & る 【2 
『 』 Hiundreds of frec。 opcn-sourcc fonts ! 

の が Ye の 7 の 7 2 の e pe の 
に 彰義 に 
人 ーー & 
ト 3 
cz 
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次 の 画面 で 多く の フォ ント の 一 覧 が 表 
示さ れる の で 、 利 用 し た い フ ォ ン ト を 
選ん で 「Quick-use」 ボ タン を クリ ッ 
ク し ます 区 還 。 





区 還 の よう な フォ ント の 設定 画面 が 表 
示さ れる の で 、「1. Choose the styles 
you want:」 で 使う フォ ント の 太 さ を 選 
択 し ます 。 

「3. Add this code to your website:」 
の 欄 に は HTML の head に 記述 する コ 
ー ド (CSS フ ァイル の リン ク ) が 、「4. 
Integrate the fonts into your CSS:」 の 
欄 に は CS5S に 記述 する コー ド (font- 
family) が 生成 され ます 。 


[市 | 一 覧 か ら フ ォ ン ト を 選択 








Gooale webfonts 天 ーー ドーー | 
oo に ーーー で FE に トー 計 
党 Gmmpu wizards make toxic brew for the evil Queen and Jack. 
ゃ こっ 
ee きらい ォ ーmee ea | 
ee 
ィ ーーー aa 
eee Grumpy wizards make toxic brew for the evil Queen and Jack. 
se 
に コ eee ee EROIEEIIIEEEIN 。 - ! 
回 ezee 
ee ms 
4 9 mart auke trre we ん 0ie ww Gr we fe 
に 
印 sw ww EEE に EE 。 -- | 


Crumpg wizardts make toxicibrew for the evil Oueem ai 


eroe raw yea ee 


反 因 フォ ント の 設定 画面 





| Goosle wsb ronts 枯 TS 
Quick Use: Magra 
eewrererhaeeeeeaeypecoce tyo 
eee 


omreo 
eo 


1 Ooose ゅ e ysyeuewc 
er wtarts eatetoeryee fr ee ee Oreen aod am 
mw we aar tak ee tw ev oe eeesaho 


AGMaza is ru co 




















て ymaeraeme es soyozr Css 








| 
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MEM0 





フォ ント の 種類 に よっ て は 、「1. Choose the styles you want:」 で 太 さ を 選択 で きま せん 。 
また 、 複 数 の サブセット が 含ま れる フォ ント の 場合 は 、「2. Choose the character sets you 
want:」 で サブ セッ ト を 選択 する こと も で きま す 。 





0S 


人 MA で 生成 され た CS5 フ ァイル の リン 
ク 証 還 を コピ ー し て 、HTML の head に 
貼り 付け ます 。 


0@ 


「Fugaz 0ne」 と 「Magra」 の よう に 複 
数 の フォ ント を 使う 場合 に は 、 民 還 の 
よう に フォ ント 名 と フォ ント 名 を 「|」 
(半角 の verticaL bar) で 区 切り ます 。 


複数 の フォ ント を 使う 場合 





<link href='http://fonts.googleapis.com/ 
css2family=Fugaz+0nelMagra' 
rel='stylesheet' type='text/css> 





07 


次 に 、 史 で 生成 され た font-family を 
コピ ー し て CSS に 貼り 付け 回 証 、 
HTML 中 の Google Web Fonts を 使用 
し た い 箇 所 に スタ イル を 適用 し ます 
2。 

Google Web Fonts の 使い 方 は 以上 で 
す 。 
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還 証 CSS フ ァイル の リン ク 








<link href='http://fonts.googleapis.com/css?family=Magra' re='stylesheet' type='text/css> 























// 間違っ た マー クア ッ プ ー 
<link href="http://fonts.googleapis.com/css2family=Fredericka the Great' 
re='stylesheet' type='text/css'> 
// 正しい マー クア ッ プ 
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' 
re='stylesheet' type='textcss'> 

区 届 CSS に font-family を 指定 HTML の 使用 し た い 箇 所 に 適用 

9 ptext{ <P class="text"> こ こ が Magra と いう フォ ン 

font-family: "Magra', sans-serif 上 に な り ます 。</p> 








font-size: 30Px: 
} 











ーー プ プア ング ms か mW アバ 


ua 


ナー ブ .。 


人 


ププ 7 gr デア 


の し すげ 


ぎ 


7 で" 


ュー 


プ 。。 ず 


Google Web Fonts を 利用 
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ここ か ら Google Web Fonts を 使用 し 
た サン プル の 解説 に 入り ます 。 

サン プル は HTML5 を 使っ て 作成 し て 
いま す が 、IE8 以 下 の 古 い プ ラウ ザ は 
HTML5 に 対応 し て いま せん 。 

そこ で 、 こ こ で は 「html5.js」 国 還 と 
いう JavaScript ファ イル を 読み 込む こ 
と で IE6… 8 に も HTML5 の 要素 が 適用 
で きる よう に し ます 。 殿 廊 の よう に 入 
力 し 、 こ こ で は 「scripts」 と いう フォ 
ル ダ に html5.js を 格納 し まし た 。 
<!--[if lte IE 8]> て <l[endif--> で 囲っ 
て いる の は 条件 分 岐 コ メン ト で 、 
HTML5 に 対応 し て いな い IE8 以 下 で 
html5.js の ファ イル を 読み 込む よう に 
指示 し て いま す 。 


9 


次 に 、 プ ラウ ザ に よっ て CSS の 各 要 素 
の デフ ォ ル ト 値 が 違う の を 揃え る た め 
に 、 "html5reset-1.6.1.css、」 と いう フ 
ァイル を ダウ ン ロ ー ド し て 読み 込み ま 





04 | Web フ ォ ン ト で テキ スト を 華やか に 彩る 





ペー ジ を つく る 


html5.js 
http://html5shim.googlecode.com/svn/trunk/html5.js 


html5.js の 読み 込み (index.htmU) 





<L-fltelE8> 


<script src="./scripts/html5js" type="text/javascript"></script> 








<!endif--> 














MEM0 


「html5.js』 に つい て は 、INTRODUCTION の 「CSS3 使 用 時 の 設計 指針 と 注意 点 」(16 ペ ー 
ジ ) も ご 覧 くだ さい 。 








html5reset-1.6.1.css 


http://code.google.com/p/html5resetcss/downloads/ 
detail2name=html5reset-1.6.1.css&can=2&q= 


CSS の 読み 込み (index.htmU 





す 回 還 。HTML フ ァイル で は 慌 語 の よ 
うに 記述 し まし た 。 
この サン プル で は Google Web Fonts 
を 利用 し て いる の で 、 そ の CSS へ の リ 
ンク も 記載 し ます 。 


<link rel="stylesheet* type="text/css" href="http://fonts.googleapis.com/css?family= 
Fugaz+OnelFrijolelNosiferICabin+SketchIMiltonianlLobster+Two"> 





<link re に "stylesheet' type="text/css" hre="http://fonts.googleapis.com/css?family= 











<link re に "stylesheet" hre="./styles/content.css" type="text/css" /> 
<F-GfIE99> 
<link re に "stylesheet" href="./styles/ie9.css" type="text/css" /> 











<Mendi-> 
< ト に -[if tte IE 8]> ーー ーー 
<link re に "stylesheet' hre="./styles/ie6_7_8.css" type="text/css" /> 











<Mtendi-> 











MEM0 


「content.css」 は メイ ン 表 示 領 域 に つい て の 指定 を まとめ た CSS ファ イル 、「default.css」 
は ペー ジ 全 体 の ヒレ イア ウト の 大 枠 に つい て 記述 し た CS5S フ ァイル で す 。 

また 、IE で の 表示 を 確保 する た め ie9.css (IE9 用 )、ie6_7_8.css (IE6 8 用 ) を 作成 し 
て 、CSS を 上 書き 指定 し て いま す 。 こ れ ら の CSS を 「styles」 フ ォ ル ダ に 格納 し て 読み 込 
ませ て いま す 。 
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次 に 、 ヘ ッ ダ ー と フッ ター に ある 「 福 
式 誤 We Love Web Fonts!l! 京 式 広 」 の 
部 分 を 見 て いき まし ょ う 騙 還 。 ど ちら 
も 同じ 指定 を し て いる の で 、 こ こ で は 
ヘッ ダー を 例 に 説明 し ます 。 

p 要素 全体 に 「Fugaz 0ne」 フ ォ ン ト 
を 指定 し 、 各 単語 の 1 文字 目 だ け を 変 
えた い の で 、span で くく り class を 付 
け ま す 。 そ し て 、 そ れ ぞ れ 別 の font- 
family を 指定 し て いま す 過 膨 放 語 。 


11 
次 に 、 ヘッダ ー の 下 に ある 「CSS3 Web 
Fonts」 と いう h1 要素 の 部 分 を 見 て み 
まし ょ う 。 星 や ハー ト は 背景 画像 と し 
て 配置 し て いま す 。 ハー ト の 画像 の 上 
に ある 「Web」 と いう フォ ント を 見 る 
と 、 ア ルフ ァ ベ ッ ト の 穴 の 開い て いる 
部 分 も 背景 画像 が きち ん と 表示 され て 
いて 、Web フォ ント で 行え る 表現 の 素 
晴らし さ を 知る こと が で きま す 福 還 。 
ここ で は h1 要 素 に 単語 ご と に 異な る 
ント を 指定 し て いま す 語 。 
6 h1 に position: relative: と し て 
配置 の 基準 を 指定 し た 上 で 、「CSS3」、 
「Web」、「Fonts」 を position: absolute: 
で 絶対 配置 し まし た 騙 語 。 
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ho-1| 単 大 の 1 文字 目 に それ ぞ れ 別 の フォ ント が 適用 され て いる 


-font01 font02 font03 .font04 ' 
交 次 wee Es 婦 交 交 


記 詞 ヘッ ダー 部 分 (index.htmU 














<p> 凛 <span class=" font01" ">W</span>e <span class=" "font02" >L</span>ove <span 
class="font03">W</span>eb <span class="font04" >F<7span>ontsl 区 交 交 </p> 」 





ヘッ ダー に 使う フォ ント の 指定 (content.css) 





























_#demoArea header p {[ ) 

、padding-bottom: 10px: _ _#demoArea header Ps span.font02 { 
text-align: center: ー font- -famiby: "Miltonian, Serifi と 
font- -family: Fugaz 0ne'. Serif font-size: 25Px: _ 
font-size: 20px: } ーー 
font-weight: bold: #demoArea header p span_font03 { 還 き 

ne-height: 08。 ( 較 font-family: Cabin Sketch,Serifi 
border-bottom: 1px solid #dcdcdci font-size: 20px: 
zoom: 1: } CE ー 

} _#demoArea header P span.k font04{ 

#demoArea header p spanfont01{ font- -famiby: "Nosifer, Serif: 

font-family: "Frijole' Serif, 男 _font-size 25pxi 

font-size:30px:。 ーー } 還 還 


トー フォ ント の 穴 の 開い て いる 部 分 も 背景 画像 が 表示 され て いる 


CS83 王 _ 


設 | 「CSS3 Web Fonts」 の 部 分 (index.htmU 








<h1> <span class="font01" ">CSS3</span> <Span class=" "font02' ">Web</span> <span 


class="font03">Fonts</span> <span class="font04"></span></h1> 





『C553 Web Fonts」 の 部 分 に 使う フォ ント の 指定 (content.css) 


#demoArea header h1 { 


04 | Web フ ォ ン ト で テキ スト を 華やか 


cverftow: hidden: 








position: relati 
height: 165px ー 
line-height: 0.8: 
background: url(./images/demoarea_ 
back_02.gif) no-repeat 370px 15px: 
} ee mm 
#demoArea header h1 span{ 








display: block: 






_font-fami te 
_font-size: 160px: 
toP: 20px: 
left:10px: 

} 


#demoArea header h1 span.font02{_ 








overflow: hidden: 





還 position: absolute: 
) ーー ー 
#demoArea header h1 span.font01 { 





width: 190px: 
ily: Fredericka the Great', Serif: 





font-size: 90px: 


ョ ョ fonLfamiy: 


こ - 彩 る 





top 5pX: ニー 

_left: 350px: ー 
} mam 一 

#demoArea header h1 span font03{ 


















imelight', Serif 





font-size: 60px: 





top: 100px: 
_left: 350px: 
} 





ヘッ ダー の 左 に ある 「2012」 の 部 分 は 、 


border-radius プロ パテ ィ で ボッ クス 
を 円 に し て いま す 弁 








r2012」 の 部 分 が 円 に な っ て いる 





「2012」 の 部 分 (index.htmU) 


<P id="zone01">2012</p> 


ここ で は 、 さ ら に top と left に ネガ テ 
ィ ブ な -35px と いう 値 を 指定 する こと 
で 、 囲 み 枠 か ら 円 が 飛び 出し た 表現 に 
し まし た 。 

絶対 配置 に し て いる の で 、 基 準 と な る 


位置 を 指定 する た め に #demoArea に 
position: relative: を 指定 し て いま す 
区 5。 


「2012」 部 分 の top や left、 絶 対 配置 の 指定 (content.css) 


#demoArea { 
position: relative: 


P#zone01 { 


position: absolute: 





width: 100px 


font-family: "Wellfleet', Serif 
font-size: 20px: 
line-height: 08: 
color: #ff: 
tex-atign: center 
background: #000: 
-webkit-border-radius: 60px 





-moz-border-radius: 60px: 
border-radius: 60px: 





height: 59px: 
padding-top: 41px: 











HH み 枠 の 右上 の 「Font」、 左 下 の 
TStyle」、 右 下 の 「type」 部 分 は 、p 要 
素 の 中 の span を 、transform プロ パテ 








ィ を 用 いて 回 転 さ せ て いま す 。 こ こ で 
は 、 右 上 の 「Font」 を 例 に 説明 し ます 。 
p 要 素 の 高 さ と 横幅 を 指定 し て 、 

overflow: hidden: で それ 以外 の 範囲 を 
表示 させ な いよ うに し て いま す 駐 証 


「Font」 の 部 分 (index.htmU 





"zone02"><span>Font</span><7P> 





工 康 。 そ うす る こと で 、 工 較 の よう な 
表現 が 可能 と な り ま す 。 

IE で は transform プロ パテ ィ に 対応 し 
て いな いた め 、 非 表示 に し て いま す 。 
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CHAPTER 03 





グラ フィ ッ ク ・ タ イボ グラ フィ 


「Font」 の 部 分 (content.css) 


高 さ と 横幅 の 指定 範囲 外 は 表示 され な い 





PWzone02 t 


padding: 30px 20px 8px: 





position: absolute: 


font-family: "Wellfleet', Serif 





top: 0: 


font-size: 16px: 





right: 0: 


tine-height: 0.8: 





overflow: hiddeni 


color: #fff: 





width: 75px: 


text-align: center: 





height: 75px: 





background: #000: | 馬 :、 当 
} -moz-transform: rotate(45deg): | 











6 P#zone02 span { -webkit-transform: rotate(45deg): 
display: block: transform: rotate(45deg): 
width: 150px: _ } 














overflow: hidden: を 
指定 し な い 場 合 


っ 





overflow: hidden: を 
指定 し た 場合 
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古 記 の DropCaps の 表現 は 、:first-letter 
擬似 要素 を 用 いて 要素 の 最初 の 文字 に 
スタ イル を 適用 し まし た 芽衣 。 こ れ は 
IE6 も 対応 し て いま す 。 
最初 の 文字 を 大 きく し て 配置 する だ け 
で 、 印 象 の 違う 見 せ 方 が 可能 に な り ま 
す 。 





ptext01{ 


要素 の 最初 の 文字 に スタ イル を 適用 (content.css) 


最初 の 1 文字 が 大 きく 表示 され て いる 











」 Web typography refers to 


line-height 1.5: 





margin-bottom: 15pxi 





_ padding-bottom: 15Pxi 








font-family: Esteban', serif: 





border-bottom: 1px solid #dcdcdci 


eb typography refers to the use of fonts on the World Wide Web. 
When HTML was first created, font faces and styles were controlled 
exclusively by the settings of each Web browser. There was no 
mechanism for individual Web pages to control font display until Netscape 
introduced the <font> tag in 1995. which was then standardized in the HTML2 | 
| specification- However, the font specified by the tag had to be installed on the 
user's computer or a fallback font, such as a browser's default sans-serif or 
monospace font, would be used. The first Cascading Style Sheets specification Was 
published in 1996 and provided the same capabilities. 


for individual Web pages 


_ margin: 10px 7px0 0: 











user's computerora 


float: left 








} 
p.text01:first-letter { 



































_font-size: 15px: display: block: 還 } 

MEM0 ー | 

牙 還 の 背景 に ある 「Typography」 と いう 文字 

は 画像 で は あり ませ ん 。Web フォ ント を 使い opacity プロ パテ ィ の 指定 (content.css) 

opacity プロ パテ ィ を 利用 する こと で 透過 させ ーー On es 

て いま す 園 男 。 こ の よう に 今 ま で 画像 で し divcolumns01 h2{ 5 color: #09c: 本 ーー 

か で き な か っ た 表現 も 、Web フォ ント と CSS3 Position: absolute: z-index: 0: 

を 使う こと で テキ スト で も 可能 に な り ます 。 top-100pxs 訓 zoom1i 隊 記 
left: Opx: -ms-filter:"progid:DXImageTransform. 


較 「Typography」 を テキ スト と し て 指定 
(index.htmU 








width: 100%: 


Microsoft.Alpha(0pacity=20): 





overflow: hiddeni: 


filter: alpha(opacit 








<div class="columns01"> 


font-family: INoticia Text. serif 


-moz-opacity:0.2: 











還 <h2>Typography<7h2> font-size: 95px: -khtmLopacity: 0.2: 
省略 font-weight: bold: opacity: 0.2: 
<7div> line-height: 1.5: } 
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次 に 、DropCaps の 下 に ある 英文 が 3 段 
組み に な っ た 部 分 を 見 て み ま し ょ う 。 

columns-count プロ パテ ィ を 指定 する 
こと で 、 文 章 の 段 組 み が 可能 に な り ま 


暫 還 段 組 み に す る 文章 (ndex Hm 





<div class=" columns01"> 








<h2>Typography</h2> 


04 | Web フォ ント で テキ スト を 華やか に 彩る 


す 。 こ の サン プル で は 、columns- 
count: 3: と 指定 し て 横 3 列 に 文字 を 配 
置 し まし た 。 文 字 量 に 合わ せ 
て 高 さ を 自 動 的 に 算出 し て くれ る た め 
崩れ る こと も あり ませ ん 。 

IE は columns-count プロ パテ ィ に 対応 








し て いな いた め 馬 語 記 3、 
示 は 崩れ て し まい ます が 、 文章 の 可 読 
性 は 保持 され る の で 、IE で の 表示 に 注 
意 し な が ら 有 効 活用 し て くだ さい 。 


段 組 み の 表 

















上 評 】 段 組み の 指定 (content, css) 





divcolumns01{ 





position: relative: 





<p>Web typography refers to the use of fonts on the World Wide Web. </p> 


<p>When HTML was first created, font faces 
settings of each Web browser</p>_ 





and styles were controlled exclusively by the 








-webkit-column-count: 3: 





<p>There was no mechanism for individual Web pages to control font display until Netscape 
introduced the &lt:font&gt: tag in 1995, which was then standardized in the HTML 2 


_specification.</p> 


<p>However, the font specified 9 the tag had to be installed on the user's computer ora 





<p>The first PP Style Sheets specification was published in 1996 and PH the 


same capabilities.</p> 





</div> 


Firefox、Chrome、Safari で は 段 組 み で 表示 され る 





Web typography refers to Py individual W Web 本 
the use of fonts on the tocontrolfont display 
World Wide Web. until Netscape introduced 


es the <font> tag in 1995. 
eesd fonc tscss 還 "hwsst で 
styles were controlled っ 1 9 准 
exclusively by the settings ・ 

」 of each Web browser. However. the font 
There was no mechanism Pediby'hetse had 


to be installed on the 


me 放 scomputer omw | 
fallback font. such as a ] 
browser's default 
-sans-serif or monospace 
font, would be used. 


The first Cascading Style 
Sheets specification vvas 
published in 1996 and 
provided the same 
capabilities. 


HTML 2 specification. 


used. 





Web typography refers to the use of fonts on the World Wide Web. 


When HTML was first created, font faces and styles were controlled exclusively by 
the settings of each Web browser- 


There was no mechanism for individual Web pages to control font display until 
Netscape introduced the <font> tag in 1995awvhich was then standarcized in the 


However, the font specified by the tag had tobe et on | 
a fallback font。 such as a browser's default sans-serif or monospace font。 vvould be 


The first Cascading Style Sheets specification was published in 1996 and provided 
the same capabilities。 


columns-count: 3: 


0 border-bottom: 1px solid 寺 ff 
} 











IE で は 段 組 み で 表示 され な い 


2 に 


電 








まとめ 


el9jI1R9 に 10 い 


Web フ ォ ン ト は 普通 の テキ スト と 
た め 、text-shadow プロ パテ ィ や tra 
付 【 ナ や 回 


ィ な ど で 
の CSS3 プロ 
表現 が 可 
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レル セア ん ジル スル シン アル 


ピン ル ん 所 く 


写真 を 装飾 し た ギャ ラリ ー 


NNIK 
CHN 


ファ イル の 種類 別に アイ コン を 表示 


属性 セレ クタ の 3 つの 条件 を 使い 分 け て 、 特 定 の 属性 の 値 が 指 
定 し た 条件 で 始ま っ て いる 終わ っ て いる 場合 な ど に CSS を 
適用 し て いま す (画面 左 は CSS 適用 前 、 右 は 適用 後 )。 



































Links 
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CS53 で 追加 され た 属性 セレ クタ を 駆使 

し て 、 リン ク に アイ コン 画像 を 表示 し た り 、 
写真 に 視覚 的 な 装飾 を 施し た り で きま す 。 
ここ で は IE6 ~ 8 で も 見 た 目 を 整え る た 

め に JavaScript を 利用 し まし た 。 


制作 ・ 文 中西 祐 介 
(株 式 会 社 ワ ン ・ ト ゥ ー・ テ ン ・ デ ザイ ン ) 


制作 の ポイ ント 


置 属 性 セレ クタ の 条件 「^』、「 呈 』、「*」 
の 使い 分 け 


置 属 性 セレ クタ を 考え た マー クア ッ プ 
時 IE で も 見 た 目 を 揃え る た め に 
JavaScript で 補う 





対応 プラ ウザ 


liE PE. 上:[Safari > 5 以上 





[Firefox ) 2 4 以上 ] [chreme 10 以上 ] 


※JavaScript 使 用 時 は IE6 か ら 対 応 。 
(IE6 8 は :after、content に 非 対 応 ) 


要素 の 直後 に 内 容 を 挿入 する 


:after 擬 似 要素 と 
content ブ プロ パテ 
ィ に よっ て 、 写 真 
の 直後 に テキ スト 
を 挿入 し て いま す 
(画面 下 は テキ ス 
ト を 絶対 配置 で 、 
写真 の 上 に 配置 し 
た も の )。 


Photos 


Photos 





05 | 属性 セレ クタ で 写真 を 装飾 し た ギャ ラリ ー 


ベー ス の HTML を 作成 する 


側 4 index.html に 功 詞 の よう に 記述 し ます 。 HTML5 に 対応 し て いな い IE8 以 下 で 
4 <!--[if tte IE 8]> <![endif]--> で 囲っ html5.js の ファ イル を 読み 込む よう に 
まず は 、 ベ ー ス に な る HTML に つい て て いる の は 条件 分 岐 コ メン ト で 、 指示 し て いま す 。 

解説 し ます 。 サ ンプ ル は HTML5 で 作 

成 し て いま す 。 html5.js 

IE8 以下 の 古い バー ジョ ン は HTML5 に 

対応 し て いな いた め 、 html5.js」 回 同 
と いう JavaScript ファ イル を 読み 込む 
こと で IE6~ 8 に も HTML5 の 要素 が 適 

















http://html5shim.googlecode.com/svn/trunk/html5.js 


[ 評 』 html5jjs の 読み 込み (index.htmU 


用 で きる よう に し まし た 。「scripts」 < ト -[if lte IE 8]> ニー ニー ーー =- 
と いう フォ ル ダ に html5.js を 格納 し <script src="./scripts/html5js" type="text/javascript"></script> 
<![endifl--> 


川 ク 避 罰 html5reset-1.6.1.css 


http://code.google.com/p/html5resetcss/downloads/ 
次 に 、 プ ラウ ザ に よっ て CSS の 各 要 素 detail2name=html5reset-1.6.1.css&can=2&q= 
の デフ ォ ル ト 値 が 違う の を 揃え る た め 
に 、「html5reset-1.6.1.css」 と いう フ 
ァイル を ダウ ン ロ ー ド し て 読み 込み ま 


す 区 還 。 HTML フ ァイル で は 工 還 の よ 33=fMeIE8S uu 5 5 WW 
うに 記述 し まし た scripts/html5.js" type="text/javascript"></script> 
こ 李 人 迎 こ o ョ 


CSS の 読み 込み (index.htmU 





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery. 





min.js"></script> 3 き 

MEMO My <script src="./scripts/ie6_7_8Jjs" type="text/javascript"></script> ー 
<![endi--> 

ペー ジ 全 体 の レイ アウ ト の 大 梓 に つい て | 5 fifiE ー 

は ・「default.css、」 に 、 リ ンク や 写真 を 表 | = 「 ー = 

示す る 領域 に つい て の 指定 は 「content. | <script src="./scripts/ie6.js” type="text/javascript"></script> ー 

css」 に 記述 し て いま す 。 これら を <!lendif--> _ ES 生 

Tstyles」 フ ォ ル ダ に 格納 し て 読み 込ま せ | <Uink re に "stylesheet" href="./styles/html5reset-1.6.1.css" type="text/css"/> 


R hi に 
| Se CB 2 68 <link re に "stylesheet' href="./styles/default.css" t 
<link re に "stylesheet" href="./styles/content.css" type="text/css" /> 





extcss" /> 














href 属性 を 使っ て リン ク に 画像 を 表示 


側 人 ⑳ プラ ウザ で 表示 させ た と ころ (CSS 適用 前 ) 


まず は 、 リ ンク し て いる ファ イル の 種 Links 
類 に 応じ て 画像 を 表示 し て いる 
「Links」 の 部 分 か ら 見 て いき ます 工 語 。 
HTML を 見 て いた だ いて も わか る よう 
に 、 マ ー ク アッ プ は 普通 の ul の リス ト 
で 、 要素 に a 要 素 で リン ク が 指定 され 
て いま す 葉 語 。 
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CHAPTER 03 


グラ フィ ッ ク ・ タ イボ グラ フィ 


Links」 の 部 分 (index.htmU) 








<section id="demoArea01 に 





<ul> 





<li><a href="./memo.xls" target="_blank">memo.xls</a></l> 





<li><a href="./text.doc" target="_blank">text.doc</a></li> 





<li><a href="./image.pdf" target="_blank">image.pdf</a></l> 





<li><a href=“"./mai/001/" title="alreadyRead">mail( 既 読 )</a></li> 本 





<li><a href="./mai/002" title="unread">mail( 未 読 )</a></ ル li> 





ul> 





</section> 





04 


ここ で は ファ イル に 応じ た アイ コン を 
表示 させ る よう に し ます 。 区 還 で は 、 
href 属 性 の 内 容 が 「.xls 構 」、「.doc 大 」、 


属性 セレ クタ の 条件 で スタ イル を 適用 (content.css) 





#demoArea01 ul lialhref$=".xls"] { 
background: url(../images/demoarea_icon_01.gif) no-repeat left 0: 


} 
#demoArea01 ul li alhref$=".doc"] { 














「.pdf た 」 の どの 拡張 子 で 終わ っ て い 
る か を 判定 し 、 そ れ ぞ れ に CSS を 適用 
し て アイ コン 画像 を 表示 し て いま す 。 
また 、title 属 性 の 内 容 が 「already 
Read 回 」 も し く は 「unread 回 」 を 含 
むか どう か を 判定 し て いま す 。 





background: url(../images/demoarea_icon_02.gif) no-repeat 0 0: 
} 
#demoArea01 ul lialhref$=".pdf]{ ーー _ 

background: url(./images/demoarea_icon_03.i⑪) no-repeat 0 0: 
5 ー ニー 2 ニー 
#demoArea01 ul lialtitle*="al 1( 

background: url(./images/demoarea_icon_04.gif) no-repeat00: 
#demoArea01 ul li altitle*="unread"] ( 

background: url(./images/demoarea_icon_05.gif) no-repeat 00: 


} 






































プラ ウザ で 表示 させ た と ころ (CSS 敵 用 後 ) 


Links 








MEM0 


属性 セレ クタ に は 条件 が 3 つ あ り ま 
す 。「^」 は 指定 し た 条件 で 始ま っ て 
いる 場合 、「$」 は 指定 し た 条件 で 終 
わっ て いる 場合 、「*」 は 指定 し た 条 
件 が 含ま れ て いる 場合 で す 。 園 と 
陸 に 構文 と 具体 的 な 例 を 示し ます 。 





属性 セレ クタ の 条件 の 具体 例 


div[class^="abc"] 





pltitle$="abc"] 
imglalt*="abc"] 


foo 属性 の 値 が bar で 始ま っ て いる 要素 
foo 属性 の 値 が bar で 終わ っ て いる 要素 
| foo 属性 の 値 に bar を 含む 要素 


E[foo^="bar"] 
E[foo$="bar"] 
Elfoo*="bar"] 





div 要 素 の class 属性 の 値 が abc で 始ま っ て いる 要素 
p 要素 の title 属性 の 値 が abc で 終わ っ て いる 要素 
img 要素 の alt 属性 の 値 に abc を 含む 要素 
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IE6 は 属性 セレ クタ に 対応 し て いな い 
た め 、JavaScript の 正規 表現 を 使っ て 
対策 を と り ま す 幼 還 。href 必 性 の 内 容 





IE6 対策 の js ファ イル (ie6.js) 


jQueryunction0{ 


が 指定 し た 条件 (「.xls」、「.doc」、 
「.pdf」 で 終わ っ て いる か ) を 判定 し た 
り 、title 属性 に 「alreadyRead」 も し 


く は ・「unread」 を 含む か を 判定 し 、 条 
件 を 満た せ ば CSS を 指定 し て いま す 。 


('ie6js」 で 記述 し た コー ド は 筆者 が 作 
成 し た も の な の で 、 自 由 に 改変 し て い 
た だ いて 結構 で す 。) 





$(#demoArea01 Il).each(function() { 


ilinkTitle) { 





Var linkHref = $(this).children(a').attr(href): 
var linkTitle = $(this).children(a').attr('title ): 
IKUinkHref) { 











if(UinkTitle.match(/alreadyRead/)) { $this).children(a.css(t 
'background': url(./images/demoarea_icon_04.gif) no-repeat left 


0):} 





inkHrefmatch(/.xls$/) { $this).children(s り .csst ! background: 


if(linkTitle.match(/unread/)) { $(this).children(a').css({ 
*background': 'url(./images/demoarea_icon_05.gif) no-repeat left 


'url(./images/demoarea_icon_01.gif) no-repeat left 0' }):} 











iKlinkHrefmatch(.doc$/)) { $this).children().css(t "background。 。 0O)] 所 _ 
_ url(./images/demoarea_icon_02.gif) no-repeat left 0' ):}  ) = 
iftlinkHref match(/.pdf$/)) { $(this).children(a').css({ "background' ) ーー 
url(/images/demoarea_icon_03.gif) no-repeat left 0' は 細 還 お : ー 還 計 本 
写真 の テキ スト を 配置 
NQ 4 選 鹿 「Photos」 の 部 分 (index.htmU 


<section id="demoArea02"> 





次 に 、 写 真 の 配置 や 装飾 に 入り ます 。 
内 と 同じ く 、 こ こも マー クア ッ プ は 至 
っ て 普通 で 、ul 要素 の リス ト に 写真 と 
その 写真 へ の リン ク を 張っ た も の で す 
臣 還 。 ブ プラ ウザ で 表示 させ る と 芽 調 の 
よう に な り ま す 。 











<l><a href="./images/2011/01/photo04_001.jpg"><img src="./images/2011701/ 
photo04_001.jpg" alt="" /></a></li> 

<li><a href=" ./images/2011/01/photo04_ 002jpg" ><imd src="./images/2011701/ 
photo04_002.jpg" alt="" /></a></l> 

<li><a href= /images/2011/01/photo04_003jpg"><img src="./images/2011/01/ 
photo04 1 003.jpg" alt=“" /><7a><7li> 

<li><a href=" images/2011/01/photo04 004.jpg"><img src=" "/images/2011/01/ 
photo04_004jpg' alt="" /><7a></【> 5 
<li><a href=" ./images/2010/05/photo13_ 001.jpg"><img src=" "/images/2010705/ 
photo13_001.jpg" alt="" /></a></l> ー 
<li><a href=" ./images/2010702/photo23. 001.jpg"><img src=" ="/images/2010702/ 
photo23_001.jpg" alt=""/></a><7> 

<li><a href=" images/2009/12/photo22 001.jpg" "><img src=" "/images/2009/12/ 
photo22_001jpg' alt="" /></a><7l> 

<li><a href=" images/2009/11/photo29_ 001j Jpg"><img src=" "images/2009/11/ 
photo29_001.jpg" alt="" /></a></li> 

<li><a href=" ./images/2009/11/photo29_ 002jpg" ><imd Src=" "images/2009/11/ 
photo29_002.jpg" alt="" /></a></ll> _ 

<li><a href="./images/2009/11/photo29_003jpg"><img src="./images/2009/11/ 
photo29_003.jpg' alt="" /></a><7> 

<li><a href="./images/2009/1 1/photo29_004.jpg"><img src=" 
Photo29_004.jpg" alt=" 
<li><a href=" / mages/2009/11/photo29_005.jpg"><img src=" 
photo29_005.jpg" alt=" 
</ul> 




















プラ ウザ で 表示 させ た と ころ 





Photos 























images/2009/1 17 
/></a></(> 








images/2009/1 7 


/<7a></ li> 

















</section> 
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7 


続い て CSS で の 指定 を 見 て いき まし 
ょ う 。 :after 擬 似 要 素 に は content プロ 
パテ ィ が 使え ます 。 民 罰 の よう に 指定 
する と 、 慌 語 の よう に 写真 の 後に テキ 
スト 要素 が 追加 され ます 。 


ここ で は 、href 属 性 の 内 容 が 「./ 
images/2011/」 で 始ま っ て いる か どう 
か を 判定 し 、:after 擬 似 要素 で 要素 の 
直後 に 内 容 を 挿入 し て いま す 。 

絶対 配置 に より 、content プ ロ パ ティ 
に よっ て 追加 され た テキ スト を 写真 の 
上 に 配置 し て いま す 工 還 葉 応 。 
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:after 擬似 要素 の content プ ブロ パテ ィ (content.css) 





#demoArea02 ul li a[href^="./images/2011/"]:after { 
content:"2011": 
省略 に 








写真 の 後に テキ スト 要素 が 追加 され る 


Photos 





反証 .after 擬 似 要素 で 内 容 を 挿入 (content.css) 





#demoArea02 uli{ left: -5px: 
position: relative: margin left: 5Px ー ーー 
省略 5 text-align: center 
) _- font-size: 77%: 還 
-#demoArea02 ullialhref^="./images/ _ font-weight: boldi ーー 
2011/"]:aftert に 間 2 、 line-height: 2: 
content:"2011": ーー color: 指 作 ーー ーー 
width: 165px: background: #f00: 
soh に 還 還 昌明 
top: 0: 


葉 記 追加 され た テキ スト を 写真 の 上 に 配置 





Photos 




















MEM0 


攻 朗 を 見 る と 、「2011」 や 「2010」 と いっ た 年 ご と に テキ スト 表示 と 背景 色 が 変わ っ て いま す 。 これ は 、 園 の よう に content プ ロバ パテ ィ と 
background プロ パテ ィ で 、 そ れ ぞ れ に 応じ た テキ スト 表示 と 背景 色 を 指定 する こと で 実現 し て いま す (「- 省略 一 」 部 分 は それ ぞ れ まっ た く 











同じ 指定 を し て いま す )。 





【 較 テキ スト 表示 と 背景 色 を それ ぞ れ に 指定 (content.css) 


#demoArea02 ul li alhref*=*"/ 
_images/2010/"]:after{ 


#demoArea02 ul li alhref^="./ 
iaO85M20N/RINBU 








#demoArea02 ullialhref 
images/2009/"]:after { 





content:"2011": content:"2010": 


content:"2009": 























省略 一 省略 還 一 閉 略 一 ー 
background: #f00: background: #900: background: #300: 
} } } = 
M⑳ で 、 要素 の 追加 を 攻 主 の JavaScript に が 可能 に な り ま す 。 
ツ グ 


て 対応 し まし た 。 
IE6 て 8 で 対応 し て いな い :after 擬 似 要 
素 や content プ ロ パ ティ を 使用 し た の 


区 廊 IE6 8 に 対応 する た め の js ファ イル (ie6_7_8.js) 


jQuery(functionO{ 


$( #demoArea02 " 0 eachfunction0 { 


span 要 素 と テキ スト を 追加 する こと 
で 、IE で も 同じ 見 た 目 を 再現 する こと ませ ん 。) 


(こち ら も 筆者 の 作成 し た も の で す の 
自由 に 改変 し て いた だ いて か まい 


"position': absolute'. 
top: 0', 








var linkHref = $(this).children(a).attr(href'): 


eft: 0', 








iinkHref) { 
ifKUinkHref match(/2011/)) { $(this). .append(" <span 
class="year2011" ">2011</span>): } 


text-align': center, 
'font-size': 77%', 








'font-weight': "bold', 








iinkHrefmatch(72010/)) { $this), append( <span 
class="year2010">2010</span>'):} 


"ine-height': 2 





"color': #f 作 








ilinkHrefmatch(/2009/)) { $(this).append('<span 
class="year2009">2009</span>):} 
} 


): 





3 #demoArea02 li SEE ya ).css({ aeR9NO9K “00 9 








お D 








$(" #demoArea02 ls span 前 css( 
width': 165px', 


まとめ [CONcLUSION] 








お 


こ 吐 き 出さ れる コン テン ツ な ど 


の の 3 に も ジレ ルス ノミ 
4 ョ ドン に ンス er 3) 


189 


レル レア ん ジン スシ ション ル アル 


4 本 Ft 【 い いん: ュ [ p 双 る 


鎧 文字 や 立体 的 な 文字 を 表現 






CSS3 で は 、 text-shadow な どの プロ パ 
ティ や 色 指 定 で 透明 度 が 指定 可能 に な 


text-shadow を 使っ て る な ど 、 文字 を きれ い に 見 せる こと を 可 
能 に する 要素 が 追加 され て いま す 。 


芝 文 や 立体 的 な 文字 を 才 現 1 文字 目 や 1 行 目 を 指定 で きる 擬似 要素 


ーー ーーーーーーーーーー こ な ども 併用 し て 、 文字 を 利用 し た 装飾 を 
ダ 四 一 emommroeaoy 行い ます 。 


開 X-STUDIO 
っ 


制作 ・ 文 / 新 谷 剛史 (株 式 会 社 セ カン ド フ ァ ク トリ ー) 


制作 の ポイ ント 


置 text-shadow の 複数 指定 

量 text-shadow や 文字 色 に アル ファ 値 を 
指定 

量 :first-line 擬似 要素 で 、1 文字 目 だ け 
を 飾る 


装 文 字 を 利用 し た 写真 と 文字 の 重ね 合わ せ 


| 確認 用 の 文字 < 


| 確認 用 の 文字 =>x。 ーー 


[Firefox )3.6 以上 | [chreme 10 以上 | 


※IE9 は :first-letter、:first-line に の み 対 応 。 


ECMNIC 1 TECHRI 


text-shadow で 袋 文字 を 実現 アル ファ 値 や 回 転 な どの 併用 








text-shadow で ぼかす 量 を 0 に し て 、 上 下 左右 方 向 に 配置 する 文字 色 に も アル ファ 値 を 指定 し た り 、 回 転 を 行う こと が で きま 
と 、 影 だ け で な く 袋 文字 を 実現 する こと が で きま す 。 す 。 文 字 を 装飾 要素 と し て 利用 する こと も 可能 で す 。 

















ン 皿 マ = こん な 装飾 可能 で す 層 
8 有紀 四 肖 
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テキ スト に 影 を つけ る 


01 


テキ スト に 影 を つけ る text-shadow プ 
ロ パ ティ で は 、 影 の 色 、 右 方 向 お よび 
下方 向 へ ずら す 距 離 、 影 を ぼかす 範囲 
を 指定 する こと が で きま す 回 還 本 。 
右 方 向 へ ずら す 距 離 や 下方 向 へ ずら す 
距離 を 指定 する 場所 で マイ ナス の 値 を 
指定 し 、 左 方 向 、 上 方 向 へ ずら すこ と 
も 可能 で す 。 














文字 に 影 や ぼかし を 加え る 








oe が WM 


text-shadow (text-shadow:\2C2727 10px 20px 5px) 
ee 








text-shadow で 影 の 色 と 範 囲 を 指定 
5 MEMO0 





h3.shadow01t 





margin-bottom:2em: 色 を 指定 し な い 場 合 の 影 の 色 は 、 プ ラウ 
ザ に 依存 し ます 。 ま た 、 影 を つけ な い 状 
態 に する 場合 に は 、none を 指定 し ます 。 





text-shadow:#2C2727 10px 20px 5px: 





、 











text-shadow プロ パテ ィ で 、 右 方 向 お 
よび 下方 向 へ ずら す 距 離 の 値 に 0 を 指 
定 し 、 影 の 色 と 影 を ぼかす 距離 を 指定 
する と 、 い わ ゆ る グロ ー の 表現 を 実現 
する こと が で きま す 攻 還 李 3。 
CS53 で は 、 色 に 透明 度 も 指定 で きる 
よう に な り ま し た の で 、 影 の 色 に 透明 
度 を 指定 する と 、 背 景 画像 に な じ ま せ 
る よう に 調整 する こと も 可能 で す 。 


央 


グロ ー (ぼん や り 発光 し て いる よう に 見 える ) 効果 


グロ ー (sshadow:*7p2An7 0 0 20px) 





text-shadow で グロ ー 効 果 を 表現 





_h3.shadow02t 





margin-bottom:2em: 


text-shadow:#7D2A17 00 20px: 








} 
影 を 斜め 方 向 に 指定 する 斜め 方 向 に 影 を 指定 し た 袋 文字 
_m3shadow30 


text-shadow プロ パテ ィ で 、 ぼ か し の 
な い 影 を 上 下 左右 に 1px ず ら す よう に 
指定 する と 、 袋 文字 を 実現 で きま す 。 
と の と き 。 上 右 。、 上 直 …… と 斜め 方 向 
に も ずら すこ と で 、 よ り 囲 まれ た 感じ 
が 強調 され る 袋 文 字 と な り ま す 屋 呈 
回 諫 。 逆 に 、 上 ・ 右 ・ 下 ・ 左 と ずら し 
た 場合 、 角 が 落ち た 感じ の 囲み と な り 
ます 回国 CE。 

プラ ウザ に より 、 線 の 濃淡 に 違い が 出 
て し まい ます の で 、 実 際 に 確認 し な が 
ら 利用 し まし ょ う 。 





























_eec4pp00。。 eS 望 ロ | | 


text-shadow: 胡 33 1px 1px 0. 寺 33 1px -1px 0. 
80DAMBX0MS9S0BKEGX08 








影 を 上 下 左右 に 指定 する 上 下 左右 に 影 を 指定 し た 袋 文 字 
h3.shadow03l( = _ 





color:#DDD: 還 (の) 計画 








text-shadow:#f33 1px 0 0.#f33 0 1px 0. 
#f33 -1px 0 0, 胡 33 0 -1px 0 











ー 
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グラ フィ ッ ク ・ タ イ ポ グラ フィ 

4 

U& 

袋 文 字 を 応用 し 、 写 真 に 文字 を 重ね た 




















場合 の 視認 性 を 向上 させ る こと が で き 


背景 色 と 袋 文字 の 組み 合わ せ 


p-shadow04 spant 

省略 一 
background-color:rgba(255.255.255.0.5): _ 
text-shadowirgba(255.255.255.0.5) 2px 0 0, 
rgba(255.255.255.0.5) 0 2px 0, 
rgba(255.255.255.0.5) -2px00. 
rgba(255.255.255.0.5) 0 -2px 0 


rgba(255,255,255.0.5) 2px 2px 0, 
rgba(255,255.255.0.5) 2px -2px 0. 
rgba(255.255.255.0.5) -2px 2px 0. 

_rgba(255,255.255.0.5) -2px -2px 0. 
rgba(255,255,255.0.75) 0 0 7px: 


] 





ます 区 罰 。 区 計 で は 、 左 上 が 透過 の 背 
景色 と 透過 色 の 袋 文字 の 組み 合わ せ 、 
その 下 は 袋 文字 な し の も の で す 。 黒い 
背景 の 部 分 で 、 文 字 の 見 え 方 に 違い が 


袋 文字 を 利用 し た 写真 と 文字 の 重ね 合わ せ 








立体 感 の ある 文字 の 表現 


0 


text-shadow を 利用 し て 、 ベ ベル や エ 
ン ボ ス の よう な 立体 感 の ある 文字 を 表 
現す る こと も 可能 で す 。 

べべ ベル の 表現 国 還 を 実現 する た め に は 、 
上 左 方 向 に 袋 文字 と 同じ 要領 で 1px の 
明る い 色 を 指定 、 そ し て 右 下方 向 に 影 
を つけ ます 。 

右 下 方 向 の 影 は 文字 色 と 同 じ 色 か 、 少 
し 明る い 色 を 指定 し ます 頒 詩 。 


[ じ 市 ベベ ル (立体 的 に 角 を 切り 取る ) 


| 確認 用 の 文字 。。 


text-shadow で ベベ ル 効 果 を 設定 


h3.shadow05{ 
text-shadow:#FFF -1px -1px 1px, 
#333 1px 1px 2px: 

} 


出 ます 。 

背景 と 影 が 同色 の 部 分 で は 袋 文字 と わ 
か り ま せん の で 、 右 上 の よう な テー プ 
で 留め た よう な 表現 も 可能 で す 。 


Cherry blossom 


0$ 


エン ボス の 表現 民主 は 、 基 本 的 に べべ 
ル と 逆 の 指定 を 行い ます 。 


区 証 エン ボス (浮き 彫り ) 
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上 左 方 向 に 影 を つけ 、 右 下方 向 に ぼ か 
し の な い 1px の 明る い 色 を 指定 し ます 
回 

べべ ベル の 場合 は ぼかす 範囲 を 少し 広め 


| 確認 用 の 文字 = | 


に し た ほう が 立体 感 も 出 て 見 や すく な 
り ま す 。 一 方 、 エ ン ボ ス を 実現 する 場 
合 は 、 ぼ か す 範 囲 は 1px に し た ほう が 
それ らし く 見 える で し ょ う 。 

















世 軸 text-shadow で エン ボス 効果 を 設定 


h3.shadow06{ 
_text-shadow:#333 -1px -1px 1px, 


#FFF 1px 1px 1px: 





} 





text-shadow で 文字 を 発光 させ る 


text-shadow を 使っ て 袋 文字 や 立体 的 な 文字 を 表現 


ーー* を っ て 
や で お 


gk 


骨 


ほう が 効果 を 確認 し や すい で す 。 





大 雑 把 に 確認 し 、 そ の あと 中 2 つの 指 











字 の 周囲 は #FFF ( 白 ) に し て 、 文 


























text-shadow を 利用 し て 、 字 自 体 が 
発光 する よう な 表現 を 行っ て み ま し ょ 
う 回 証 。 背 景 は 明る い 色 より 暗い 色 の 


功 訓 | 文字 が 発光 し て いる よう な 表現 


文字 か ら の 発光 





骨 


発光 し て いる 感じ を 強調 する た め に は 、 





中 2 つの 指定 を 中 心 に 調整 し ます 。 色 
を 若干 明る め に 、 ぼ か し の 距離 を 詰 


[市 より 強く 発光 し て いる よう な 表現 


文字 か ら の 発光 


これ まで の 例 で は 文字 自体 の 色 を 白系 
で 表現 し まし た が 、 ネ オン らし く と い 
うこ と を 考え た 場合 は 、 文 字 色 も 発光 














区 市 より ネオ ン ら し くす る 


文字 か ら の 発光 


字 自体 が 光っ て いる 感じ を 表現 し ます 。 
残り の 指定 で 発行 し て いる 色 を 表現 し 
ます が 、 白 の 指定 十 後 ろ 2 つ の 指定 で 

















text-shadow で 発光 する 文字 を 設定 
h3.shadow07{ 
Color:#FFF: 
background:#000: 
text-shadow:#FOFOFO 0 0 5px, 


る よう に 調整 する こと で 、 発 光 体 か ら 
光 が 強 く 出 て いる 感じ と な り ま す 還 。 
最初 の 白 の ぼかし の 距離 を 長く する と 
文字 自体 が ぼけ た 感じ に な り ま す の で 
逆 に 距離 を 詰め る くら い の ほ う が よ い 


text-shadow の 値 を 変更 する 
h3.shadow07b{ 
Color:#FFF: 
background:#000: 
text-shadow:#F0FOFO 0 0 3px, 
#9DECFF 0 0 30px.#9DECFF 0 0 50px, 
#00CCFF 0 0 100px,#00CCFF 0 0 120px: 


し て いる 色 に 合わ せま す 較 還 。 

この 際 、 文 字 の 色 は 中 2 つの 色 と 同 じ 
程度 に し て 、 後 2 つの 色 は 文字 色 よ り 
濃い 色 に し た ほう が よい よう で す 。 
また 、 前 の ペー ジ で 指定 し た 袋 文 字 と 


[思文 字 色 を 発光 し て いる 色 に 合わ せる 


h3.shadow07dt 

color:#7DE6FF: 

background:#000: 

text-shadow: 

#0093B7 1px 1px 1px.#0093B7 1px -1px 1px, 


定 を 行う と 作業 し や すい で し ょ う 。 中 
2 つの 色 は 白 と 後 2 つ の 間 く らい の 色 
を 指定 し ます 因 肌 。 




















#7DE6FF 0 0 50px.#7DE6FF 0 0 70px, 
#OOCCFF 0 0 100px.#00CCFF 0 0 120px: 
} 


で し ょ う 臣 較 。 

参考 に 、 指 定 順 を 逆 に し た も の も 用 意 
し まし た 。 わ ず か に 色 が 異な る の で す 
が 、 目 視 で きる ほど の 差 は な いよ う で 
す 医 較 。 





区 評 指定 順 を 逆 に し た も の 


文字 か ら の 発光 


同様 の 指定 を する こと で 、 文 字 が 見 や 
すく な り ま す 。 袋 文字 で は ぼかし の 距 
離 を 0 に し まし た が 、1px ぼ か す と よ 
いで し ょ う 加 。 


#0093B7 -1px 1px 1px#0093B7 -1px -1px 1px, 
_ 尋 OFOF0005px。 

#7DE6FF 00 50px#7DE6FF 0 0 70px 

#0OCCFF 0 0 100px#0OCCFF00 120px: 

} 
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色 や 文字 サイ ズ に よる 表現 


0 
CSS3 で は 、 ア ルフ ァ 値 で の 指定 が で 


きる よう に な り ま し た 。 ア ルフ ァ 値 は 
text-shadow の 色 指 定 で 使用 で きる ほ 





紅 罰 アル ファ 値 を 使っ た 色 の 重ね 合わ せ 





か 、 文 字 色 で も 利用 で きる た め 、 重 ね 
合わ せな どの 表現 が で きま す 。 
この 例 は アル ファ 値 の 確認 の た め 、 左 
か ら text-shadow の アル ファ 値 を 1.0、 
0 の sssapt と 順に 減ら し て いま す 。 


text-shadow の 色 指定 で 色 を 重ね 合わ せる 


p-alpha01{ 昌 
background:url(./img/bg04.png): 
color:#0040C6: 記 二 
text-shadow:rgba(0.0.0.1.0) 40px 0 0, 


背景 の 市 松 模様 (チェ ッ ク 柄 ) の 見 え 
方 に より 、 ア ルフ ァ 値 が 有効 に な っ て 
いる の が わか り ま す 騙 還 臣 四 。 


_rgba(0.0.0.0.9) 80px 0 0. 
= 
rgba(0.0.0.0.1) 400px 00: 





訓 還 の よう に 、 ア ルフ ァ 値 を 指定 し た 
文字 や text-shadow を 重ね 合わ せる こ 


文字 や text-shadow の 重ね 合わ せ 


と も 可能 で す 。text-shadow と 重なっ 
た 文字 の 色 が 変化 し て いる こと 、 背 景 
模様 も 見 える こと が 確認 で きま す 罰 調 。 
アル ファ 値 を 小さ くし て 透過 率 を 上 げ 





1 文字 目 や 1 行 目 の 装飾 





:ifirst-letter 擬 似 要 素 で 、1 文字 目 の 指 
定 を 行う こと が 可能 で す 弁 証 。 

日 本 語 で は あま り 見 か け な い 表現 で す 
が 、 こ の 例 で は 1 文字 目 だ け 大 き さ を 
調整 し 、 さ ら に float:left を 指定 する こ 














と で 、 文 字 の 回 り 込み の 調整 も 行い ま 
し た 叉 畔 。 


194 


1 文字 目 だ け 大 きく する 


ro 識 に も 疑問 を 持ち 、 前 提 条 件 を 「 常 に 正しい 」 と は 思い 込 
本 まな い 柔 軟 な 考え 方 が 大 切 だ ーー | 


る と 色 が 薄く な り 、 逆 に アル ファ 値 を 
大 きく する と 重ね 合わ せ の 効果 が わか 
り に くく な る た め 、 文 字 に 黄色 な ど を 
使う 場合 は 注意 が 必要 で す 。 


引 記 color と text-shadow に アル ファ 値 を 指定 


pralpha02{ 
background:url(./img/bg04.png), 
color:rgba(0.64,198.0.6): 
text-shadow:rgba(0.0.0.0.4) 10px 3px 0: 


] 


::first-letter で 1 文字 目 を 大 きく し 、float:left で 回 り 込 み を 調整 


ptext01。 
ptext01bt に 
_font:33px bold。 還 
color:rgba(62.88.95.0.7) 
] ー 
ptext01::first-lettert 
_float:left: 





_font-size:72px 





MEM0 


文字 を 大 きく する 際 に は 、 単 純 に 文字 サ 

イズ を 標準 サイ ズ の 倍 に する の で は な く 、 
行間 も 意識 し て 調整 する こと が 必要 で す 。 
実際 に 表示 し て 確認 し な が ら 調 整 す る の 

が 効率 的 で し ょ う 。 





3 





ーー 


1 行 目 に 指定 を 行う ::first-line 擬似 要 
素 も 用 意 さ れ て いま す 。 この 例 で は 背 
景色 を 指定 し まし た 駐 呈 旗 憎 。 
画像 の 上 下 は 、1 文字 目 の float 指定 の 
有無 が 異な っ て いま す が 、float 指 定 の 
行わ れ て いる 文字 に は ::first-line の 指 
定 が 有効 で は な い 点 を 確認 し て お きま 
し ょ う 葉 還 。 


0e | text-shadow を 使っ て 袋 文字 や 立体 的 な 文字 を 表現 





::first-line で 背景 色 を 指定 





ptext01:ifirst-line。 
ptext01b::first-linet 
background:rgba(255,128.0.0.5): 
} 











1 文字 目 に float を 指定 し た 例 











は 
症 コ まな い 和 柔軟 な 考え 方 が 大 切 だ 





1 行 目 の 背景 色 を 変更 し た 結果 





r エ な 


と は 思い 込ま な い 柔 軟 な 考え 方 が 大 切 だ 











jibefore、::after 擬 似 要 素 で 追加 し た 
文字 に 対し て 、 角 度 の 指定 を 行う こと 


訳 則 .:before で 追加 し た 文字 に 対し て 角度 を 指定 





が 可能 で す 古 還 。 

この 例 で は ::before で 追加 し た 文字 に 
文字 色 、position、transform の 指定 
を 行い まし た 馬 謙 。 


jibefore で 追加 し た 文字 に 文字 色 、position、transform の 指定 を 行う 


_pdtext02:beforet デ 








_positioniabsolute bottom:0: right:5px: 


前 の ペー ジ で 説明 し た text-shadow プ 
ロ パ ティ に よる 影 の 指定 も 有効 で す の 
で 、 文 字 を 利用 し た 装飾 も CSS3 で は 
行い や すく な り ま し た 。 





font-size:70px: 





-moz-transform:rotate(355deg): 





-webkit-transform:rotate(355deg): 





color:rgba(2.42,111.0.7): 








まとめ [CONCLUSION] 
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CHAPTER 03 
レル レア だ シス シル シル ン ア だ 


U/ 


に を た ユー を ンド 


あな た の デー タ は 大 丈夫 ? 


スマ ー ト フォ ン に は 「 見 守り トラ 」 











素早 くに お い を か ぎ 分 ける ドロ ボウ イヌ の 攻撃 か ら ス マー ト 
フォ ン を 守る た め に は 、 狂 猛 さ を あわ せ も つ ド ロボ ウイ ヌ に 
も 負け な い パ ワー、 広 大 な 森林 や 湿地 の 中 か ら 獲 物 を 見 
つけ 出す 目 と 鼻 、 木 の 上 に も 登っ て どこ まで も 獲物 を 追い 
詰め る 動き が 必要 で す 。 

倒し た 獲物 は 強 吾 な 力 で 噛み つき 、 ド ロボ ウイ ヌ の 息の根 
を と め て 確実 に 仕 玉 め ます 。 


変幻 自在 に デー タ の あり か を 探し 出す 賢 さ を 持つ ドロ ボウ イヌ 
は . PC で の 大 活躍 が 難し いと 判断 する や 否や 、 攻撃 の 手 を ス 
マー ト フ ォ ン に 移し て いま す . スマ ー ト フォ ン の セキ ュ リティ 対策 
は 始ま っ た ば か り . PFO と 比較 する と 、 ドロ ボウ イヌ が お いし い 





画像 の 重ね 合わ せ で 実現 する 





CS53 か ら 、 背景 画像 を 複数 指定 する こ 
と が 可能 に な り ま し た 。 背景 画像 を 組み 
合わ せる こと で 、 よ り 複 雑 な 背景 を 簡単 
に 実現 する こと が で き 、 表 現 の 幅 が 広 が 


制作 ・ 文 ノ 新 谷 剛 史 (株 式 会 社 セ カン ド フ ァ ク トリ ー) 


制作 の ポイ ント 


時 値 を 複数 指定 する 場合 、「, (カン マ )」 


デー タ に あり つけ る 可能 性 は 非常 に 高く な っ て いま す - 「 見 守り * 区 も セ 

トラ 」 は . ドロ ボウ イヌ の 攻撃 か ら あな た の スマ ー ト フォ ン を 鉄 或 で 区 切る 

の ガー ド で 守り ます 。 時 先 に 指定 し た 背景 が 一 こ 、 後 に 
1 本 2 先 に 指定 し た 背景 が 番 上 に 、 後 に 
[見守 り ト ラ 」 の 防 角 シ ステ ム 指定 し た 背景 が 下 に 配置 され る 


邊 背景 色 は 一 番 最後 に 指定 する 








対応 プラ ウザ 


IE | Safari | 
Firefox | Chrome | 
※IE 9 は 一 部 対応 

画像 を 重ね て デー タ を 軽量 化 背景 画像 と グラ デー ショ ン の 組み 合わ せ 


透過 PNG 画像 を 

重ね 合わ せる な ど 、 
画像 の 重ね 合わ せ 

で デー タ 量 を 減ら 

し つつ 、 多 彩 な 背 
景 を 実現 する こと 

が で きま す 。 


背景 の グラ デー シ 
ョ ン は 背景 画像 と 
同様 の 扱い で す 。 

不透明 度 の 指定 も 
可能 で 、 重 ね 合わ 
せ 用 









オン を 守る た た め に は 、 
4 な パワー の な 林 e 二 電 の 中 から 見 
ャ すい た も 登っ て どこ まで も 獲物 を 追い 





な ぷ え る と よ 
り 複雑 な 背景 処理 
も 実現 で きま す 。 
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と に に ME 本 北 で こと の jc っ) 





作 基本 的 な 指定 方 法 は 、CSS2 で 背景 画 指定 し た 順に 下 に 表示 され ます 。 

* ソー 像 を 指定 する 方 法 と 一 緒 で す 。 設定 す この 例 で は タイ トル 領域 に 背景 画像 、 
CS53 で は 、 複 数 の 背景 画像 を 指定 し る 値 は 「, (カン マ )」 で 区 切り ます 。 上 部 と 下部 に エフ ェクト 目的 の 画像 を 
て 重ね 合わ せる こと が で きま す 回 語 。 最初 に 指定 し た 画像 が 一 番 上 に 、 以 降 、 配置 し て いま す 回 語 。 


複数 の 背景 画像 を 重ね 合わ せ て いる (sample01.htmU) [| 重ね 合わ せ の 関係 











( の 画像 の 重ね 合わ せ の 指定 (sample01 の CSS) 
リグ 


-headert 
最初 に 指定 し た 背景 画像 が 一 番 上 に き margin:100px 0 0: padding:25px 0 0: 
ます の で 、 ボ ックス 上 部 の 影 を 表現 す background:url(../img/imghrt.png) no-repeat center top, 
る た め の 画 像 を 最初 に 指定 し ます 。 続 url(../img/imghrb.png) no-repeat center bottom. 
いて 、 ボ ックス 下部 の 影 を 表現 する た url(./img/bgjpg) repeat left top 
} 


め の 画 像 、 一 番 下 に 緑色 の 背景 リ ビ ー 
ト 画 像 を 指定 し まし た 華 。 

この 例 で は 、 ボ ックス 下部 の 影 を 表す 
画像 を 先 に 指定 し て も 同じ 見 え 方 と な 
り ま す が 、 緑 色 の 背景 画像 を 先 に 指定 
する と 、 影 の 画像 が 見 えな く な り ま す 。 
指定 する 順番 に 注意 し まし ょ う 。 内 
CSS2 で は 複数 の 背景 指定 を 実現 する し まし ょ う 。 

た め に 、 装 節目 的 の 複数 の div で 囲む に 
よう な こと を 行っ て いた と 思い ます が 、 

背景 画像 を 複数 指定 で きる よう に な っ 

た こと で 、HTML 内 の 装飾 目的 の div を 

必要 最小 限 に 抑え る こと が で きる よう 

に な り ま す 。 








MEM0 ーー 


IE な ど を 対応 プラ ウザ と する た め に も 、 
まだ し ば らく の 間 は 装 節目 的 の div や 
span を 併用 する こと に な り ま す が 、 常 に 
「 何 を 実現 する た め に (div を ) 利用 し て 
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CHAPTER 03 





グラ フィ ッ ク ・ タ イボ グラ フィ 


画像 の 重ね 合わ せ で メン テ ナ ン ス し や すい タイ トル を 実現 





【U 
複数 の 背景 画像 を 重ね 合わ せ て タイ ト 
ル を 実現 する 方 法 は 、 ク ライ アン ト か 





簡単 に 差し 替え られ る タイ トル 部 分 
(sample02.htmU 





ら 「 写 真 を 定期 的 に 差し 替え た い 」 と 
いう 依頼 が あっ た 場合 に 有効 で す 。 


証 還 で は 、 ヘ ッ ダ ー 部 の イメ ー ジ 画像 


と 、 イ メー ジジ 画 像 の 上 に 配置 する マス 


ヘッ ダー 部 の イメ ー ジ 画像 


ク 画 像 を 別々 に 用 意 す る こと で 、 イ メ 
ー ジ 画像 だ け を 簡単 に 変更 で きる よう 
に し まし た 葬 田 蔽 軸 。 








選 衣 イメ ー ジ 画像 の 上 に 配置 する マス ク 画 像 





U& 


左 の イメ ー ジ 画像 、 紙 を めく っ た 表現 


の マス ク 画 像 、2 つ の 画像 で ペッ ダー 
部 分 を 実現 し て いま す 人 語 区 3。 
例 で は 、 マ スク の 関係 で 左 の 画像 を 三 


角形 状 に する こと を 前 提 に し まし た が 、 


クラ イア ント 自身 が 画像 を 変更 する こ 
と を 想定 する 場合 、 サ イズ の 調整 だ け 
で 実現 で きる よう に 考慮 し ます 。 


マス ク 画 像 の 写真 側 に も 若干 影 を つけ 、 


左 の 画像 と な じみ や すく し まし た 。 





ヘッ ダー 部 分 の CSS (sample02) 


.headert 
padding-top:50pxipadding-bottom:50px: 
background:url(.…/img/headmask.png) 
no-repeat -11px -13px, 
url(./img/topimg01.png) no-repeat left top: 
} 





全体 の 背景 は 、 単 色 ベ タ 塗 り の 上 に 、 
色 の 変化 を つけ る た め に の せ た 横 方 向 
へ の 薄い 黒 の グラ デー ショ ン 、 模 様 の 


画像 を 順に 配置 し て 実現 し て いま す 。 
単色 ベタ 塗り は 一 度 だ け 、 一 番 最 後 
(一 番 下 ) に 指定 し ます 。 

グラ デー ショ ン は ベン ダー プレ フィ ッ 
クス を つけ て 指定 し て いま す 。 こ こ で 


[市 ペー ジ 全 体 の CSS に よる 記述 (sample02 の CSS) 


bodyt 
margin:0: padding:0: 
/* for mozilla 7 


background:url(../img/bg-back.png) repeat left top, 


/* for webkit 7 


は 、background プロ パテ ィ で 一 括 指 
定 し まし た が 、 グ ラ デ ー シ ョ ン は 
background-image プロ パテ ィ で 指定 
する こと を 覚え て お く と よい で し ょ う 
105-1 上 


background:url(./img/bg-back.pno) repeat left top, 
-webkit-gradient(linear,left top,left bottom.from(rgba(0.0.0.0.15)), 


-moz-linear-gradienttop.rgba(0.0.0.0.15).rgba(0.0.0.0)) no-repeat #O00: 


#000: 
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} 


to(rgba(0.0,0.0))) no-repeat, 





ーー 


複数 の 画像 を 組み 合わ せ た 痛 景 


US 


背景 画像 を 複数 指定 で きる よう に な っ 
た た め 、 画 像 同士 を 重ね 合わ せ て 表現 
する 複雑 な 背景 画像 も 、 軽 量化 を 意識 
し な が ら 実 現 で きる よう に な り ま し た 。 
この 例 で は 、 水 色 の 背景 画像 の 上 に 白 
色 の 透過 画像 を 重ね て いま す 民 還 。 ひ 
と つの 画像 を リピ ー ト し て 表現 し た 痛 
景 画像 に あり が ち だ っ た 、 見 た 目 の 違 
和 感 が 軽減 され 、 よ り 自 然 な 背景 を 容 
易 に 実現 で きる よう に な り ま し た 加計 。 


07 | 画像 の 重ね 合わ せ で 実現 する さま ざま な 背景 





区 軸 ベー ス に な る 素材 (sample03.htmU 


| | 
1 1 


計 の 背 景 画像 の 組み 合わ せ 例 (sample03.htmU 





彼 は ぷう ぶ う と た ある 。 考 も 少し な い 。 それ に 弱っ で か 時 々 見 当 を 残っ べき 。 


吾 墓 の み 濾 暗 い 実に な ら ある 頃 を 感じ 食う て 祥 だ け も 見 当 生 れ て いる . これ も それ が 見 と 人 間 と いう の 
に さき な 。 し か し 真中 か ら 見 が これ は 顔 と いう M 還 中 に 当時 | 妙 た 煙 で た だ そう ゆめ 。 こ の 感じ いう は ず ( は と 
ん と これ を 食う と さて 玉 っ と いう 記憶 た だ 。 し か し いわ ゆる 今 は これ と いう 祝 は 涯 鹿 い だ て フワ フワ な い だ 
いい 7 ぉ ら な た 。 ( 目 激 石 「 吾 募 は 猫 で ある 」 を 元 に 作成 ) 





人 謗 /4 
U7 


複数 の 背景 画像 を 重ね る の で は な く 、 
組み 合わ せる こと で 背景 を 表現 する こ 


背景 の も と に な る 素材 (sample03.htmU 





い ず に グラ デー ショ ン の 指定 だ け で 実 
現す る こと も 可能 で す 國 。 


と も 可能 で す 。 
この 例 で は 長方形 と ひし 形 の 画像 を 重 
ね 合わ せ 、 引 用 の イメ ー ジ を 実現 し ま 
し た 図 還 。 長 方 形 の 部 分 は 、 画 像 を 用 





C 計 | を 組み 合わ せ て 作っ た 引用 の イメ ー ジ (sample03.htmU) 


彼 は ぶ う ぶ う と た ある 。 老 も 少し な い 。. それ に 弱っ で か 時 々 見 当 を 残っ べき 。 


吾 墓 のみ 薄暗い 実に はら ある 頃 を 感じ 食う て 穴 だ け も 見 当 生 れ て いる 。 これ も それ が 見 と 人 間 と いう の 
に さ な 。 し か し 真中 か ら 見 が これ は 顔 と いう M 困 中 (に 当時 | 妙 た 煙 で た だ そう ぬ 。 この 感じ と いう は ず ( は と 
ん と これ を 食う と さて 弱っ と いう 記憶 た だ 。 し か し いわ ゆる 今 は これ と いう 寧 は 光 暗 い だ て フワ フワ な い だ 
いぶ な ら な た 。 (夏目 激 石 「 和 吾輩 は 交 で ある 」 を 元 に 作成 ) 





background-size に より 、 背 景 画像 の 
サイ ズ を 変更 する こと も 可能 に な り ま 
し た 。 

右 の 例 で 利用 し て いる 角 丸 四角 形 の サ 
イズ は も と も と 大 きい の で す が ( 民 証 )、 
縮小 し て 使用 し て いま す 還 主 。 背 景 画 
像 サイ ズ を 個別 に コン トロ ー ル する こ 
と は で き な い 点 に 注意 し ます 。 ま た 、 
Firefox な ど mozilla 系 の ブラ ウザ で は 、 
ベン ダー プレ フィ ックス を つけ る 必要 
が ある 点 に も 注意 し ます 民 還 。 





background-size で 背景 画像 の サイ ズ を 


[市 月 丸 四角 形 の 元 の 大 き さ (sample03.htmU) 
ー 変更 (sample03 の CSS) 


[ ぶ う ぶ う に た ある 。 老 も 2 ル し 
生 2 DER5Eo 全 2 .contents4{ 


background:url(./img/check.pno) n0- 





repeat 35px 5PX 


切 は 光 吐 い だ て フワ フワ な いだい 
ある 」 を 元 に 作成 ) 


url(./img/base01.png) no-repeat 20px 20px: 





background-size:40PX autoi 





-moz-background-size:40px autoi 
} 
角 丸 四角 形 を 縮小 し た (sample03.htmU 
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CHAPTER 03 


グラ フィ ッ ク ・ タ イボ グラ フィ 





1 つの 画像 で 実現 する ヘッ ダー 背景 


09 


擬似 要素 ::before や ::after に 、position 
と 、1 枚 の 画像 を さま ざま な 角度 に 回 
転 さ せる 指定 を 組み 合わ せる こと で 、 

複雑 な 背景 を 実現 する こと が で きま す 。 
区 還 で は 、1 つの 正方 形 の 背景 画像 を 
回 転 させ て 重ね 合わ せ 、 さ ら に body 
の 背景 と し て 同じ 画像 を 指定 する こと 
で 、2 つ の 画像 を 重ね 合わ せ た 背 景 を 
実現 し まし た 。 

擬似 要素 は 、CS552 で は 「:hover」 な 
どの 擬似 クラ ス と 同様 に 指定 し て いま 
し た が 、CSS3 で は 擬似 クラ ス と 擬似 
要素 を 区 別 す る た め 、「: (コロ ン )」 を 
2 つつ ける こと と され て いま す 葉 罰 。 
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背景 画像 を 指定 する background プロ 
パテ ィ に は 、 回 転 に 関す る 指定 が あり 
ませ ん 。 そ の た め 、 通 常 の 写真 と 同じ 
要領 で 配置 し た 画像 を 回 転 し 、 こ の 画 


1 つの 画像 を 回 転 させ て 組み 合わ せ た 例 (sample04.htmU 
1 つの 画像 で 実 1 


1 つの 右 叶 芋 わ 合 わせ る こと で 、 彰 可 に 天 








萌 景 画 人 矯 を 指定 する kackgound プ ロバ ティ に は 、 回 転 に 関す る 指定 が あり ませ ん . その た め 、 通常 の 写真 と 同じ 要 額 で 配置 し た 画像 を 回 
転 し 、 この 画 修 を 背景 と し て 利用 し ます 。 

間 東 し て 和 有する 中 枯 は 、 あら か じ め HTM 内 に 配置 し て お < 方 法 で も 実現 で きま す が 、 今回 は HTM 内 に デザ イン 目的 だ け の 要素 を 配 
置 する こと を け 、 contew プ ロバ ティ を 利用 し て 画像 を 配置 し まし た 。 


Fo フアン と liE す る こと も 可 村 で す 。 また 、 責 の 人 所 を する こと も で きま す 。 
に , ジ 
towerm フ ロティ で は 回 は 外 に も 角 杉 重 ビアー( 結 と の を 行う に と も て さま す 。 











擬似 要素 の 一 覧 





要素 名 ::first-line 
要素 名 ::first-letter 


最初 の 1 行 に スタ イル を 適用 し ます 
最初 の 1 文字 に スタ イル を 適用 し ます 


要素 の 直前 に 追加 生成 する 内 容 に スタ イル を 適用 し ます 。 
content プ ロバ ティ を 同時 に 使用 し ます 


要素 の 直後 に 追加 生成 する 内 容 に スタ イル を 適用 し ます 。 
content プ ロバ ティ を 同時 に 使用 し ます 


要素 名 ::before 


要素 名 ::after 





content プ ロ パ ティ を 利用 し て 画像 を 配置 (sample04 の CSS) 


_body: zaftert ー 
content:url(./img/rectangle.png): 
、 一起 中 一 
_positionabsolute top:-420pxi left:-480px 




















像 を 背景 と し て 利用 し ます 。 

背景 と し て 利用 する 画像 は 、 あ ら か じ 
め HTML 内 に 配置 し て お く 方 法 で も 実 
現 で きま す が 、 今 回 は HTML 内 に デザ 
イン 目的 だ け の 要素 を 配置 する こと を 
避け 、content プ ロ パ ティ を 利用 し て 
画像 を 配置 し まし た 騙 加 。 
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画像 の 回 転 は 、transform プロ パテ ィ 
で 指定 し ます 。 現 状 で は 、 ベ ンダ ー プ 
レフ ィ ッ クス を つけ て 指定 し ます 玉 語 。 
角度 の 指定 は deg ( 度 ) 以外 に rad ( ラ 
ジア ン ) な ど で 指 定 す る こと も 、 負 の 
値 を 指定 する こと も で きま す 訪 。 
回 転 以外 に も 拡 縮 、 移 動 、 シ アー ( 傾 
斜 ) な どの 指定 も 可能 で す 。 











07 | 画像 の 重ね 合わ せ で 実現 する さま ざま な 背景 


transform プロ パテ ィ で 画像 を 
回 転 さ せる (sample04 の CSS) 





body::aftert 
contenturl(../img/rectangle.png): 








-moz-transform: rotate(47dedq): 





-webkit-transform: rotate(47deg): 
ご ( 欄 休 ーー 
} 











回 転 の 方 向 を 表し た 図 
| 





KR、| ン 
1 
| 
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画像 の 位置 は 、 position:absolute で 固 
定 し まし た 。 必 要 に 応じ て z-index を 
調整 し て 写真 が ほか の 要素 の 下 に 配置 
され る よう に し ます 。 

この 画像 は さま ざま な 画面 サイ ズ に 対 
応 で きる よう に 幅 方 向 を 大 きめ に し て 


証 position:absolute で 画像 の 位置 を 固定 (sample04 の CSS) 


bodyt 
_margin:0: padding:0: 


お り 、 プ ラウ ザ の 幅 に よっ て 横 方 向 の 
不要 な スク ロー ル が 出 て し まい ます 。 
この スク ロー ル バ ー の 制御 は 、 多 く の 
プラ ウザ で 動作 する 「overflow-x」 を 
利用 し て 対応 し まし た 横 罰 。 

背景 画像 は 、body タグ の 背景 と し て も 
利用 し ます 。 そ の た め 、 背 景 画像 は あ 
ら か じ め 若 干 回 転 させ た 状態 と し て お 





width:100%: 
overflow-x:hiddeni 








background:url(./img/rectangle_png) no-repeat 0 -155px 





} 


body:after( NE コ 
content:url(./img/rectangle.png): 





-moz-transform: rotate(47deg): 
-webkit-transform: rotate(47deg): 
position:absolutei top:-410pxi left:-480px 





まとめ CONCLUSION] 


育 景 画像 の 重ね 合わ せ が で きる よう に 
の た め だ け の ブロ ッ ク 


閉 旦 画 


9 
けれ ば 実現 で 


用 意 し な 
な か っ た 表現 も 、 簡 単に 実現 で きる よ 


ら 段 階 





き 、 背 景 画像 で も 水平 で は な く 若 干 角 
度 が 変化 し た 状態 を 実現 し て いま す 。 
また 、 重 ね 合わ せ を 実現 する た め 、 透 
過 PNG 画 像 と し て いま す が 、 透 過 
PNG は ファ イル サイ ズ が 大 きく な っ 
て し まい や すい た め 、 回 転 時 に 表示 さ 
れ な い 領 域 の 画像 は 削除 し 、 軽 量化 を 
図り まし ょ う 蓄 謙 。 





使用 し て いる 背景 画像 (sample04) 


リピ ー ト に より 単調 に な り が ち だ っ た 背景 に 

こと も 可能 に な っ て いま す 。 
ここ で 紹介 し た テク ニッ ク 
な いも の も あり ま 
9 に 取り 入れ 


ば は 、JE' で ば ま 
プラ ウザ の 対 
みて くだ さい 。 
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レル レア ん ジル スル シン アル 


DropCaps を 使っ た 
雑誌 風 の テ キス ト 表 現 


5HEEN SPDT 











| を の ギモン 了 こ 
5 
が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 
今年 の 書 は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で う 章 
3 


花 の 層 く タイ プ の 植物 を 個 く と 、 室 内 が グ 
ア を 理 識 し た 色 の 花 だ と 、 い 






か ?」 


語 で 不思議 で し ょ う が な の で す 。 


由 研 究 で や っ て みれ ば いい 。 も ちろ ん 、 そ う 考 えま し た 。 で も 





し まい 、 ま た 別 の 自由 
自由 研究 を 終え た 時 に 思い 出す の で す 





れ で は いけ な い 。 話 は 解明 し な けれ ば いけ ませ ん 。 
今 が チャ ンス と ば か り に 、 赤 い 花 の 咲く 植物 A と 紫 の 
物 B を 敵 入 し まし た 。 






⑱ 


Cooyright e GREEN SPOT Lecture Al rights rewerved 


テキ スト に イン パク ト を 出す 


DropCaps を 用 いる こと で 、 段 落 の 1 文字 目 を 目立た せる こと 
が で きま す 。 


が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 今 
緑 年 の 春 は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で し ょ うか ? 

花 の 咲く タイ プ の 植物 を 置く と 、 室 内 が グ っ と 華やか に な り ま す 。 
イン テリ ア を 意識 し た 色 の 花 だ と 、 い っ そう オシ ャ レ な 部 屋 に 見 えま すね 。 


ころ で 、 私 に は 小学 生 の 頃 か ら ず っ と 疑問 だ っ た こと が あり ます 。 
「 植 物 A の 花粉 を 植物 B に 受粉 させ せ る と 、 花 は 咲く の か ?」 小 
学生 は 、 理 科 で 「 己 伝 」 を 勉強 し ませ ん か ら 、 不 思 議 で 不思議 で 

し ょ う が な か っ た の で す 。 
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DropCaps は 雑誌 で よく 使わ れる “先頭 

文字 を 拡大 し て 回 り 込 ませ る "表現 で す 。 
お も に 連続 する 段落 の アイ キャ ッ チ と し 

て イン パク ト を 与え た い 場 合 に 使用 され 

ます 。 

CSS3 も 組み 合わ せる こと に より 、 よ り 多 

彩 な 表現 が 可能 で す 。 


制作 ・ 文 赤間 公太 郎 ( 株 式 会 社 マ ジ カ ル リ ミッ クス ) 


時 first-letter を 使っ て 先頭 文字 を 選択 


時 文字 サイ ズ の 単位 は 扱い や すい em を 
採用 
時 CSS で 文字 周り の アキ 具合 を 調整 


[E | sasri | 


| Firefex | chrome 2 | 


※IE で は text-shadow、border-radius に 非 対 応 。 





CSS3 を 利用 し て より 多彩 な 表現 に 





CSS3 を 使う こと で 、 テ キス トシ ャ ドウ な ど 、 よ り 3 
を 行う こと が で きま す 。 


が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 
今年 の 春 は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で し ょ う 
か ? 


花 の 咲く タイ プ の 植物 を 置く と 、 室 内 が グ っ と 華やか に な り ま す 。 イ ン テ リ 
ア を 意識 し た 色 の 花 だ と 、 い っ そう オシ ャ レ な 部 屋 に 見 えま すね 。 


な 表現 





ベー ス に な る 段落 を シン プル に マー クア ッ プ 


則 用 


テキ スト 主体 の 段落 が いく つか ある コ 
ラム ペー ジ を 例 に し て いま す 。 

特に 1 文字 目 に 対す る マー クア ッ プ は 
意識 せ ず 、p 要素 で シン プル に 段落 と 
し て マー クア ッ プ し ます 回 韻 回 





人 記 シン プル な マー クア ッ プ 


<div id="column"> 





プラ ウザ で 表示 させ た と ころ 





緑 が と て も キレ イ な この 季節 。 今回 の コラ ム の 担当 は 、 赤間 で す 。 今年 
の 春 は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で し ょ うか ? 

花 の 咲く タイ プ の 植物 を 置く と 、 室 内 が グ っ と 華やか に な り ま す 。 イ ン 
テリ ア を 意識 し た 色 の 花 だ と 、 い っ そう オシ ャ レ な 部 屋 に 見 えま すね 。 


と ころ で 、 私 に は 小学 生 の 頃 か ら ず っ と 疑問 だ っ た こと が あり ます 。 

「 植 物 A の 花粉 を 植物 B に 受粉 させ る と 、 花 は 咲く の か ?」…… 小学 生 
は 、 理 科 で 「 遺 伝 」 を 勉強 し ませ ん か ら 、 不 思 議 で 不思議 で し ょ う が な 
か っ た の で す 。 


<p> 緑 が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 今 年 の 春 は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で し ょ うか ? <br/> 











花 の 咲く タイ プ の 植物 を 置く と 、 室 内 が グ っ と 華やか に な り ま す 。 イ ン テ リ ア を 意識 し た 色 の 花 だ と 


、 い っ そう オシ ャ レ な 部 屋 に 見 えま すね 。</p> 





<p> と ころ で 、 私 に は 小学 生 の 頃 か ら ず っ と 疑問 だ っ た こと が あり ます 。 「 植 物 A の 花粉 を 植物 B に 受粉 させ る と 、 花 は 咲く の か ?」…… 小学 生 は 、 理 科 
で 「 遺 伝 」 を 勉強 し ませ ん か ら 、 不 思 議 で 不思議 で し ょ う が な か っ た の で す 。</p> 


省略 一 


<!--/column--></div> 





基本 と な る CSS を 準備 し ます 。 
拡大 する 文字 と 、 本 文 の 文字 サイ ズ ・ 
行間 の パラ ンス を 調整 する た め 、 あ ら 
か じ め コ ラム 向け な 、 適 切な 値 を 設定 
ます 。 

は 基本 文字 サイ ズ を 14px、 行間 を 
1.6 と し まし た 区 生 。 








ロ 








基本 と な る CSS 
@charset "UTF-8": 


body.h1.h2,h3,p,uLlit 

- margin:0: 
padding: 0: 

] 

body { 
font-size: 14px: 
line-height: 1.6: 

} 


段落 の 1 文字 目 に DropCaps を 適用 する 





first-letter 擬 似 要 素 で 1 文字 目 を 選択 
し ます 。「#column p:first-letter」 と 
する こと で 、 指 定 ID 内 の p 要 素 すべ て 
に 適用 する こと が で きま す 民 語 。 




















first-letter 擬似 要素 で 1 文字 目 を 選択 


#column p:first-letter {} 


だ け に 適用 し た い 場 


PR 
nt 4 36329 
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CHAPTER 03 


グラ フィ ッ ク ・ タ イ ポ グラ フィ 


04 


first-letter 擬似 要素 で 選択 し た 1 文字 
目 の レ イア ウト や サイ ズ 調 整 を 行い ま 
す 区 到 区 思 。 

まず 、font-size: 3em: を 指定 し 、1 文 
字 目 を 通常 の 段落 の 文字 サイ ズ よ り 3 


1 文字 目 の レ イア ウト や サイ ズ 調 束 


-#column pifirst-letter{ 





_ font-size: 3em:_ 
float: left: 





padding: 10px: 





margin-right: 10px: 





倍 の 大 き さ に 拡大 し ます 。 
次 に float: left: を 指定 し 、1 文 字 目 を 段 
落 の 左 に 回 り 込 ませ ます 。 
さら に margin-right: 10px: と padding: 
10px: を 指定 し 、 文 字 周 り の バラ ンス 


世 乙 DropCaps を 適用 し た 結果 


を 整え ます 。 

文字 サイ ズ の 単位 に は em を 使う と 
* 〇 文字 分 の 大 き さ "” と いっ た 具合 に 、 
文字 サイ ズ の バラ ンス を イメ ー ジ し や 
すい で し よ ょ う 。 





が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 今 

年 の 春 は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で し ょ うか ? 

花 の 咲く タイ プ の 植物 を 置く と 、 室 内 が グ っ と 華やか に な り ま す 。 
イン テリ ア を 意識 し た 色 の 花 だ と 、 い っ そう オシ ャ レ な 部 屋 に 見 えま すね 。 


に 


ころ で 、 私 に は 小学 生 の 頃 か ら ず っ と 疑問 だ っ た こと が あり ます 。 
「 植 物 A の 花粉 を 植物 B に 受粉 させ る と 、 花 は 咲く の か ?」…… 小 


学生 は 、 理 科 で 「 選 伝 」 を 勉強 し ませ ん か ら 、 不 思 議 で 不思議 で 


し ょ う が な か っ た の で す 。 





05 
文字 の 回 り 込み バラ ンス を 適切 に する 
た め 、Iine-height: 1: を 指定 し ます 
(IE6・7 向 け に は ハッ ク を 使い *line- 
height: 1.5:) 還 証 。 
line-height の 指定 が な いと 、IE や 
Chrome な どの プラ ウザ で 1 文字 目 の 
回 り 込み が 適切 に 表現 され な い 場 合 が 
あり ます 民主 。 必 ず line-height を 指定 
する よう に し まし ょ う 。 








多彩 な 装飾 を 施す 
0D@ 
CSS3 の プロ パテ ィ を 使っ て 多彩 な 装 


人 節 を 施し て み ま す 。 
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line-height の 指定 


#column p:first-letter { 





fon-size: 3em: 
float: left: 


Padding: 10px: _ 








margin-right: 10px: ーー 

line-height:1: 
Une-height: 1.5:/*IE6.7 用 ハッ クツ 
} 


[に 記 回 り 込 み が 適切 に な っ た 


| ャ 





た 色 の 花 だ と 、 いっ そう オシ ャ レ な 部 屋 に 見 えま すね 。 


が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤間 で す 。 今年 の 春 
は 、 お 花 の 咲く タイ プ の 観葉 補 物 な ん て いか が で し ょ うか ? 

花 の 咲く タイ プ の 植物 を 置く と 、 室内 が グ っ と 華やか | に な り ま す 。 イン テリ 
ア を 意識 し た 色 の 花 だ と 、 いっ そう オシ ャ レ な 部 屋 に 見 えま すね 。 


が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 今年 の 春 
は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で し ょ うか ? 
花 の 咲く タイ プ の 植物 を 置く と 、 室内 が グ っ と 華やか | に な り ま す 。 イン テリ ア を 意識 し 





MEM0 


| line-height の 値 を 指定 する 際 、 単位 は 付 

| けず に 数 値 の み 記 述 し まし ょ う 。 単位 を 
付け な い 場 合 、「 倍 率 」 と し て 扱わ れる の 

| で 、 た と えば line-height: 1: の 場合 は 1 
倍 と な り ま す 。 
Uine-height: 1.5: と 指定 し た 場合 、 行 間 
が 1.5 倍 に な る な ど 、 数 値 と 実際 の 行間 
の アキ 具合 を ある 程度 想定 し た 状態 で 指 
定 す る こと が で きま す 。 














まず は 、 古い IE (バー ジョ ン 6 一 8) に 
お いて も 、 あ る 程度 の デザ イン が 表現 
で きる よう に し ます 。 

この 例 で は font-weiqght: bold:、 


background: #49a342:、color: #fff: 
と し 、 文 字 の 太 さ 、 背 景色 、 文 字 色 を 
調整 し まし た 回 量 本 








文字 の 太 さ 、 背 景色 、 文 字 色 の 調整 








#column p:first-letter 


、 *ine-height: 1.5:/*IE6.7 用 ハッ クツ 





文字 の 太 さ 、 背 景色 、 文 字 色 を 調整 し た 結果 











font-size: 3em: 


font-weight: boldi 





float: left: 


background: #49a342: 





paddind: 10px: 


color: #fff 





_ margin-right: 10px _ 民 





line-height: 1: 


礁 は 、 お 花 の 咲く タイ プ の 観葉 補 物 な ん て いか が で し ょ う が ? 
花 の 咲く タイ ブ の 補 物 を 置く と 、 室内 が グ っ と 華やか | に な り ま す 。 イン テ 
ーーー リア を 意識 し た 色 の 花 だ と 、 い っ そう オシ ャ レ な 都 屋 に 見 えま すね 。 


緑 が と て も キレ イ な この 季節 。 今回 の コラ ム の 担当 は 、 赤 間 で す 。 今年 の 


の 花粉 を 植物 B に 受粉 させ る と 、 花 は 咲く の が? 」.… 小 学生 は 、 理科 で 


二 回 ころ で 、 私 に は 小学 生 の 頃 か ら ず っ と 疑問 だ っ た こと が あり ます 。 「 植 物 き 


「 遺 伝 」 を 勉強 し ませ ん か ら 、 不思議 で 不 思 譲 で し ょ う が な か っ た の で す 。 
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次 に 、C553 に よる 装飾 で す 。 
まず は 文字 に 影 を 入れ て み ま し ょ う 。 
文字 に 影 を 指定 する に は 、text-shadow 


文字 の 周り に 均等 な 影 を 設定 


#column pf st-letter { 


*line-height: 1.5: /*IE6.7 用 ハッ ク 


プロ パテ ィ を 使用 し ます 。 

今回 は 右 下 に 落ち る よう な 角度 の ある 
影 で は な く 、 文 字 の 周り 全体 に 影 が 付 
く よ う に し ます 。 背 景 と の 区 切り や 、 

さり げ な く 目 立た せる よう な 指定 と し 


均等 な 影 を 設定 し た 結果 


て 効果 的 で す 。 

区 呈 の よう に 指定 し ます 。x 座 標 、y 座 
標 を 0 と する こと で 、 文 字 の 周り に 均 
等 な 影 を 設定 する こと が で きま す 











font-size: 3em: 
float: left 


background: #49a342: 





か ? 








> padding: 10px_ 


color: #fff: 





_ margin-right: 10Pxi ご 提 
line-height:1: } 


text-shadow: 0 0 5px #000」 


が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 
今年 の 春 は 、 お 花 の 咲く タイ プ の 観葉 植物 な ん て いか が で し ょ う 


花 の 咲く タイ プ の 植物 を 置く と 、 室 内 が グ っ と 華やか に な り ま す 。 イ ン テ リ 
ア を 意識 し た 色 の 花 だ と 、 い っ そう オシ ャ レ な 部 屋 に 見 えま すね 。 





U@9 
さら に 背景 も 工夫 し て み ま し ょ う 。 
border-radius を 使用 する と 、 プ ロッ 


border-radius で 角 丸 の 効果 を 与え る 


#column pifirst-lettert 


font-weight: bold: 


ク 要 素 に 角 丸 の 効果 を 与え る こと が で 
きま す 。 
この 例 で は border-radius: 30px, と し 


まし た 本 還 。 文 字 サ イズ に 合わ せ て 数 


値 を 大 きく する こと で 、 角 丸 長 方 形 か 
ら 円 状 に 近づけ て 表現 する こと が で き 
ます 還 。 


border-radius の 数 値 を 大 きく し て 円 状 に 見 せる 





記 ーー = が と て も キレ イ な この 季節 。 今 回 の コラ ム の 担当 は 、 赤 間 で す 。 
_ fonsize:3em: background: #47a342: 緑 今年 の 春 は 、 お 花 の 咲く タイ プ の 観 生 植 物 な ん て いか が で し ょ う 
float: left: color: #fff: か ? 


paddng: 10px 


margin-right: 10px: 


text-shadow: 0 0 5px #000: 
border-radius: 30px: 


花 の 咲く タイ プ の 植物 を 置く と 、 室 内 が グ っ と 華やか に な り ま す 。 イ ン テ リ 
ア を 意識 し た 色 の 花 だ と 、 い っ そう オシ ャ レ な 部屋 に 見 えま すね 。 








tine-height: 1: ーー 1 
+Une-height: 1.5:/IE6.7 用 ハッ クツ 


まとめ [CONCLUSION] 


回 有 
も 対応 し 





こも 柔軟 な 対 
止 の た め 、IE 向 け に line-height を 必 


よう 。 
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レセ アン スシ シン レア 


= レア ルス 4 ウル 玉 


写真 に アク セン ト を つけ る 






ドロ ッ プ シャ ドウ (box-shadow) を 使 
用 する と 、 画 像 や ボッ クス 要素 に 対し て 
影 を 付け る こと が で きま す 。 ギャ ラリ ー 
系 の サイ ト で 写真 を た くさ ん 扱う 場合 な 
ど 、 ア クセ ント と し て ドロ ッ プ シャ ドウ が 
効果 的 で す 。 


制作 ・ 文 ノ 赤 間 公 太郎 (株 式 会 社 マジ カル リミックス ) 


制作 の ポイ ント 


時 box-shadow で 写真 に シャ ドウ 効果 を 


表現 

是 padding で 余白 を 調整 し 、 写真 の 周り 
を 装飾 

呈 RGBA カ ラー モデ ル で 影 の 濃淡 を 細 
か く 調 整 

ko アル レル アル 

[i - 還 6 以上 ] [saari 5 以上 ] 


| Firefox 4 以上 | [chrome 12 以上 | 


ドロ ッ プ シャ ドウ で 立体 的 に 見 せる べ ベ ル 的 な 表現 も 可能 


画像 や ポッ クス 要素 影 を 内 側 に 適用 し た 


ぱ 
に 影 を 付け る こと で 、 1 』 DS | り 、 座 標 の 調整 や 影 


立体 的 な 効果 を 出す の 色 を 工夫 する こと 
が ベル 的 な 表現 な ど ) 


こと が で きま す 。 で 、CSS3 だ け で さ 


ま ざ ま な 見 た 目 ( ベ 





206 








写真 を 並べ た ギャ ラリ ー を 用 意 す る 


U 
写真 を 並べ た ギャ ラリ ー サ イト の 
HTML を 用 意 し ます 。 

ここ で は 回 較 の よう に 、 員 要素 で マー 
クア ッ プ し ます 。 

table 要素 を 使う ケー ス も あり ます が 、 
table 要素 に は " 行 " の 概念 が あり 、 写 
真 を 追加 ・ 削 除 す る 際 に HTML ソー ス 
の 編集 が 炉 雑 に な る 場合 が あり ます 。 





1 





li 要素 で 写真 を 並べ る 


<ul> 





aw /></ ル ll> 
< に 
/></l> 


/><li> 


<li><img src="img/photo/p01jpg" alt= 








<li><img src="img/photo/p02.jpg" 





SI2210giste=Ung/Bhioto/603NP9: 
"img/photo/p04jpg' 
<li><img src="img/photo/p05.jpg 





<li><img sr 








な <7l> 
"た <l> 
"<7l> 
"img/photo/p08.jpg" alt="" /></ll> 
""/></li> 


<li><img src="img/photo/p10jpg" alt=""/><7l> 





_<li><img src="img/photo/p06jpg" 








<li><img src="img/photo/p07Jpg" 





<li><img src= 






<li><img sr 


<li><img src="img/photo/p11.jpg' alt="" /><7ll> 





<li><img src="img/photo/p12jpg" at=""/><7l> 





<7ul> 
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li 要素 に float を 指定 し 、 写 真 を 横 に 並 
べ ま す 。 写真 の サム ネイ ル サ イ ズ と メ 
イン カラ ム の 幅 を 計算 し 、 余 白 も 含め 
て 整え ます 。 

ここ で は 3 行 4 列 の ギャ ラリ ー で す が 、 
この よう な レイ アウ ト の 場合 、2 行 目 
で “強制 改行 "は せ ず に 、1 つ の 写真 の 
横幅 と 全体 の カラ ム 幅 を 計算 し 、 次 の 
写真 が "自然 に 2 行 目 に 落ち る "よう 
に し ます 。 そ うす る こと で 、HTML に 
余計 な 記述 が 増え な く て 済む うえ 、 並 
べ 替 え や 写真 追加 に も 柔軟 に 対応 が 可 
能 で す 。 

すべ て の 要素 に 対し て 右 margin を 
設定 し まし た が 、 行 の 最後 (4 枚 目 の 
写真 が 入る 要素) の 右 margin は 、 親 
要素 の ul に 対し て overflow: hidden: を 
指定 し 、 断 ち 切 る 設定 に し て いま す 
避 。 

これ に より 、HTML 側が 極力 少な い コ 
ー ド で 、 カ ラム の 左右 を バラ ンス よく 
整え る こと が で きま す 攻 廊 。 


[市 写真 を 横 に 並べ 、 余 白 も 含め て 整え る 


 #content { _width: 800px: 


overflow: hidden: margin: 5px 00 7pxi E 








margin: 40px0: } 
} 還 -#content ul 5 
lp ii float: left: ーー 
省略 margin: 0 24px 20px 0: 
} 


#content ul { 


カラ ム の 左右 が バラ ンス よく 整っ て いる 


サル る チ ザ 














MEMO 


ベー ジ の 横幅 が 800px に 対し て 、1 枚 あ た り の 写真 の 表示 幅 は 187px (写真 実 寺 175px・ バ 
ディ ング 10px・ ボ ー ダ ー 2px) に な り 、 写 真 を 4 枚 並 べ る と 合計 で 748px に な り ま す 。 
物理 的 に 5 枚 目 は 並び ませ ん の で 、 自 然 と 2 行 目 に "あえ て カラ ム 沙 ちさ せる "設定 と し て 
いま す 。 
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CHAPTER 03 


グラ フィ ッ ク ・ タ イボ グラ フィ 


03 

写真 の 端 か ら す ぐに ドロ ッ プ シャ ドウ 
を か ける と 、 ゆ と り の な い デ ザイ ン に 
な る た め 、 写真 の 周囲 に 余白 や 線 で 飾 
り ま す 。 写真 に 対し て border: 1px、 

padding: 5px を 設定 し 、 写 真 の 装飾 を 
整え ます 。 

padding を 加え た こと に より 、 写 真 同 
士 の 間隔 が 広く な り ま し た 。 (内 で 設定 
し た 1 要素 に 対し て 、 右 margin が 
24px の まま で は 、3 枚 目 の 写 真 の 後 で 
カラ ム 落 ち し て し まい ます 。 調整 の た 
め 、 昌 要素 の 右 margin を 12px に 変更 
し まし た 区 還 回 罰 。 




















医 一 写真 に 枠 を 付け 、 さ ら に 写真 同士 の 間隔 を 調整 





#contentullit 





background: 者 枯 ー 




















_ float: left: - border: 1px solid #999: 
margin: 0 12px 20px 0: padding: 5px: 
} } os 語 語 
#content ulliimgt 
写真 の 装飾 が 整っ た 
| 6 詳 語 計 
9 分 
O 還 業 の 動物 の の そ 府 
| 





1 


ドロ ッ プ シャ ドウ を 適用 す 





0&% 


box-shadow プロ パテ ィ を 使用 し て 、 
写真 に 影 を 付け て いき ます 。 
基本 的 な 書き 方 と し て 、 屋 証 の よう に 、 
4 つの 数 値 士 色 指定 で 構成 し ます 。 
この 表示 結果 は 慌 調 の よう に な り ま す 。 








box-shadow プロ パテ ィ の 基本 的 な 書き 方 


y 座 標 オ フ セ ッ ト 
box-shadow: 2px 2px 5Dx 


x 産 標 オ フ セ ッ ト ほか し 中 合 


写真 の 枠 に 影 を 付け た と ころ 





MEMO0 


box-shadow は 数 値 部 分 を 省略 し て 記述 
する こと が で きま す 。 


・ 数 値 が 4 つの 場合 : 
y 座 標 オ フ セ ッ ト 、 
ドウ の 広がり 

・ 数値 が 3 つの 場合 : x 座 標 オ フ セ ッ ト 、 
y 座 標 オ フ セ ッ ト 、 ぼ か し 具合 

・ 数 値 が 2 つの 場合 : x 座 標 オ フ セ ッ ト 、 
y 座 標 オ フ セ ッ ト 


x 座 標 オ フ セ ッ ト 、 
ぼかし 具合 、 シ ャ 


基本 は 4 つの 数 値 オ カラ ー で 記述 し ます 
が 、Web 制 作 の 現場 で よく 使わ れる の は 
数 値 が 3 つの 書き 方 で す 。 
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9 











シャ ドウ の 広がり 








9 #666: 


カラ ー 


ul gr 











り 09 | ドロ ッ プ シャ ドウ 効果 で 写真 に アク セン ト を つけ る 





img.normalt padding: 15pxi -moz-border-radius: 10px: /* Firefox */ 
background: #fff box-shadow: 2px 2px 5px #666 inset: -webkit-border-radius: 10px, /* WebKit */ 
padding: 15px: } -0-border-radius: 10px: /* Opera 7 
box-shadow: 2px 2px 5px #666: -ms-border-radius: 10px / IE10 7 

1 img.bevel{ border-radius: 10px: / W3C 7 

ー background: #fff 

img.inset { padding: 15px: 

background: 8 box-shadow: 0 -7px 10px 4px #ccc inset: 




























































































ア 
【 
1 0 h 
有 MEM0 
応用 で 、 ナ ビ ゲ ー シ ョ ン に も ドロ ッ プ 較 

6 シャ ドウ の 色 指定 は 通常 HEX  【 男 カラ テー ビッ カー 

シャ ドウ を 適用 し て み ま し ょ う 。 カラ ー (16 進 数 ) で 記述 し ます ei 
ア 通常 の ソリ ッ ド な デザ イン の ナビ ゲー が 、RGBA で 指定 する こと も 可 
/ ショ ン に 対し て 、 わ ず か に 立体 的 な 効 et Na 

由 合 、 rgba(0, 0. 0, 

果 を 適用 し ます 。 0.5): の よう に カン マ 区 切り で 指 
タ box-shadow プロ パテ ィ の 値 に inset を 定 し ます 。 カ ンマ 区 切り の 4 つ 

Sn 目 は 、1=100% (不透明 ) で す 

I パ 

追加 し て 、 内 側 に 影 が つく よう に し ま の で 、 影 を 半分 の 50% の 叫 さ に 

す 回 還 。 し た い 場 合 、0.5 と 記述 し ます 。 
立体 的 に 見 せる ポイ ント と し て は 、y RGB の 数 値 は 、Photoshop な ど 
0 の カラ ー ビ ッ カー 圏 を 見 る と 、 
「 座標 に マイ ナス の 値 を 指定 する と 、 下 設定 が カン タン で す 。 | 
- の 方 の 影 の 量 が 多く な り ま す 陣 語 。 L 
1 
inset で 内 側 に 影 が くる よう に する 
ァ #headerulliat 
ト display: block: home 
width: 79px: 
* height: 30px: 
、 line-height: 30px: 

box-shadow: 0 -5px 10px rgba(0.0.0. 0.5) inset: news Profile feEIIEN contact 

上 

を 計 
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CHAPTER 03 





グラ フィ ッ ク ・ タ イ ポ グラ フィ 


「CSS3 PIE」 を 使っ て IE6 ~ 8 に 対応 させ る 


box-shadow プロ パテ ィ は 本 来 IE9 以 
降 の 対応 で す が 、JavaScript ラ イプ ブラ 
リ を 利用 する と 、IE6 ~ 8 で も 対応 可 
能 に な り ま す 。 

今回 、 ラ イブ ラリ は 「CSS3 PIE」 を 利 
用 し ます 。 

5 司 国 】 の Web サ イト か ら ダ ウン ロ 
ー ド し 、 圧 縮 フ ァイル を 展開 する と 、 
いく つか の ファ イル が あり ます が 、 使 
用 する ファ イル は 「PIE.htc」 で す 。 





医 呈 cSS3 PlE 


http://css3pie.com/ 


MEM0 、 


「PIE.htc』. に つい て は 、 
CHAPTER01-04「 ウ ィ ン ド ウ 
サイ ズ に 連動 する リキ ッ ド タタ 
イプ の フリ ー レ イア ウト 」 の 
53 ペー ジ 、MEMO0 も 参照 。 














選 届 「CS53 PIE」 の Web サ イト 


PiE makes Internet Explorer 6-9 capable of rendering 
several of the most useful CSSs decoration features. 








「CSS3 PIE」 を 適用 する に は 、box- 
shadow プロ パテ ィ を 使用 し た スタ イ 
ル の 並び に behavior: url("/PIE.htc"): 
を 記述 し ます 葬 語 。 


TCSS3 PIE」 の 適用 


box-shadow: 2px 2px 5px #666: 
behavior: ur("PIE.htc"): 


ここ で 注意 が 必要 な の は 、「PIE.htc」 
ファ イル まで の パス で す 。 通常 は 絶対 
パス (/ か ら 始 まる パス ) を 指定 し ます 
が 、 本 サン プル で は ロー カル 環境 で の 
確認 も ふま え 、 相 対 パス を 利用 し て い 
ます 。 


4 


相対 パス の 利用 時 に 、HTML ファ イル 
が 複数 の ディ レク トリ に 分 散 す る よう 
な 構造 の 場合 、 そ れ ぞ れ の パス が 変わ 
っ て し まう の で 注意 し まし ょ う 。 
また 、「CSS3 PIE」 は "http://" か ら 始 
まる 指定 も で きま せん 。 


CSS3 PIE は box-shadow の inset に は 対応 し て いま せん 。 そ の た め 、 IE6 ご 8 か ら の 対 
応 は 外側 の ドロ ッ プ シャ ドウ を 設定 する 際 に 利用 し まし ょ う 。 


まとめ [CONCLUSION] 





elaET【 ひ YA の EAI に し 出生 ト :3 の 

ドウ を 組み 合わ せる こと に より 、 な 表現 が 可能 で 
す 。 特 に ナビ ゲー ショ ン や ボタ ン な ど 、 基 本 の HTML 
や CSS に あま り 手 を 入れ る こと な く 、 視 覚 効果 を 追加 


で きま す 。 

古い バー ジョ ン の IE に 対し て は ライ ブラ リ 利 用 で 対 
応 が 可能 で す が 、 ラ イプ ラリ 独 特 の 記述 方 法 や 、 ほ か 
の プロ パテ ィ と 衝突 する ケー ス も 想定 され ます の で 、 
導入 の 際 に は 注意 し まし ょ う 。 
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最後 に 、 プ ラウ ザ に よる box-shadow サポ ー ト の 現状 
に 触れ て お きま す 。 

Firefox4 以降 、 Safari5.1 以降 は ベン ダー プレ フィ ッ ク 
ス は 不要 で す (ペン ダー プレ フィ ックス に つい て は 、 
15 ページ の INTRODUCTION 「 ブ プラ ウザ と ベン ダー プ 
レフ ィ ッ クス 」 の 項 も ご 覧 くだ さい )。 

た だ し 、Safari5.0、Firefox3.6 ま で は ベン ダー プレ フ 
ィ ッ クス が 必要 で す の で 、 古 い プ ブラ ウザ まで サポ ー ト 
する 場合 な ど 、 必 要 に 応じ て 追記 し まし ょ う 。 


rrr 。 rrrrrrrrrrrrrr。rrrrhnyrrrrrrrrrrrxrrrhu 。 マ ィ ャ ママ ュ ャ マテ マコ 


CSS3 で 表現 する デザ イン 性 豊か な ボタ ン 

に 1 5 マト か 北 る コン リヤ cz = レス ソル / レム ョ アー ャ ニュ ンー レク 
擬似 クラ ス を 利用 し た 可読性 の 高い テー ブル 

マー クア ッ プ の み で 表現 する 階層 の わか りや すい ツリ ー 図 
border と 背景 の 組み 合わ せ や outline で 実現 する 飾り 肢 線 
レセ ん Am レレ ブ コ gh ロン 7 ムリ た エラン ビ トク 

属性 セレ クタ を 活用 し た スマ ー ト フォ ン サ イト 

操作 性 を 考慮 し た スマ ー ト フォ ン 向 け の パー ツ 

グラ デー ショ ン 機 能 を 使っ た 蛍光 マー カー 風 の 文字 装飾 
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デザ イン パー ツ 


CSS3 で 表現 する 
デザ イン 性 豊か な ボタ ン 





PPP CS53 の プロ パテ ィ を 生か し て 、 つや の あ 
SN08 55DIS 2 る ボタ ン や フラ ッ ト な ボタ ン を 作り ます 。 
SARprzuxAanaor また 、 CSS3 の 対応 度 が 低い IE に つい て 
は 、 あ えて 外部 ライ プラ リ を 使用 せ ず に 
対応 し ます 。 


制作 ・ 文 佐藤 と も 子 ・ サ チコ (螺旋 デザ イン ) 





制作 の ポイ ント 


時 つや の ある グラ デー ショ ン の 表現 


時 text-shadow と box-shadow を 使っ 
て 影 の ニュ アン ス を 表現 


時 IE で の アク セ シ ビ リティ の 確保 


arregi ゃ ee < aois カー ド に 入れ る 


te ample 


対応 ブラ ウザ 
IE PE. | |Safari 5 以上 ] 


Firefox 〉 8 以上 [chrome 16 以上 | 


画像 を 使わ ず に ボタ ン を 表現 IE 用 表示 に 代替 方 法 を 使っ て 表現 








Web サ イト で よ 動作 が 重く な る 外部 ライ ブラ リ は 利用 せ ず に IE で の 表示 を 保 
く 見 か ける ボタ ン つ 方 法 も 検討 し て いま す 。IE9 で は グラ デー ショ ン を 表現 する 
を 、 画 像 を 使わ ず ao こと が で き な い た め 、 背 景色 を 設定 し て いま す 。 

に 、box-shadow 
や グラ デー ショ ン 

な ど CSS だ け で 
表現 し ます 。 数 量 :| 1 ・ 


ルプ お 問い 合せ ーー 


カー ド に 入れ る 














価格 : \100.000 円 。( 込 \105.00O 円 ) 送 乱入 
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まず は 、 べ ベタ 塗り ・ 外 側 に ライ ン が 2 
本 ある ボタ ン を 作り ます 四則 。 

HTML は 単純 な aq タグ の み の 状 態 で す 
oi-2 財 

ここ で は 外側 の dd に id を 付け て いま 
す が 、 この 方 が レイ アウ ト 調 整 な ど に 
便利 だ か ら で す 。 


ボタ ン 本 体 の 親 の dd に 、 幅 ・margin 
を 設定 し ます 。 
幅 の 設定 を ここ で し て お く と 、 ボ タン 


市 幅 ・margin の 設定 


#mainContent #goodsSpec dd#goodsFavorite { 


width:150px: 
margin: 5px auto: 


) 


[ 連 】 背景 と ボー ダー の 設定 


草 mainContent #goodsSpec dd#qoodsFavorite a { 


display:blocki 
background-color:#FOFOF0: 
border: 1px solid #C1C1C1: 


上 中軸 ボタ ン の 原型 


お 気に入り 


旧 朋 ボタ ン の HTML 


<dd id="goodsFavorite"><a href="#"> お 気に入り </a></dd> 


本 体 の a 要 素 で padding や border を 付 
け て も dd の 幅 よ り 大 きく な ら な い の 
で 、CSS5 の コン トロ ー ル が 楽に な り ま 
す 区 還 。 

a タ グ を ポタ ン に する に は 、 は じ め に 


昌 記 ボタ ン の 角 丸 な ど を 設定 





display を block に し 、 次 に 背景 と ボー 
ダー を 設定 し まし ょ う 攻 胃 。 

文字 設定 な ども し て お きま し ょ う 。 
角 丸 な どの 設定 も し た 状態 で す 攻 軸 。 


草 mainContent #goodsSpec dd#goodsFavorite a{ 


display:block: 
background-color:#FOFOF0: 
border: 1px solid #C1C1C1: 
border-radius:5px: 
padding: 3px 0: 

text-align: center: 

Color: #616161: 
text-decoration:none: 
font-weight: bold, 

font-size: 12px: 


ボタ ン 内 側 の ライ ン を 、box-shadow 
を 使っ て 表現 し ます 。 

値 の 設定 は 情 還 を 参照 し て くだ さい 。 
これ を 利用 し て 設定 する と 、 謀 の よ 
うに な り ま す 。 

最後 に 、 マ ウス オー バー 時 の 設定 も 作 
っ て お きま し ょ う 民 計 。 
通常 時 a 要 素 の 設定 を 、:hover の と き 
に 変わ る 部 分 を 上 書き し て いま す 。 




















| box-shadow の 値 の 設定 


x 方 向 y 方 向 ほか し 影 の 大 き さ 


アル ファ (透明 度 ) 


LT 1 


box-shadow:inset Opx Opx Opx 1px rgba[255,255,255,1]: 


内 側 に 影 を 作成 
省略 する と 外側 に 影 を 作成 


RG6B+ ア ルフ ァ で 色 指 定 


+ 


値 255-0 値 1-0 
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CHAPTER 04 


選 哀 box-shadow の 設定 


井 mainContent #goodsSpec dd#goodsFavorite at 


display:blocki 
background-color:#FOFOF0: 
border: 1px solid #C1C1C1: 


box-shadow:inset 0px Opx Opx 1px rgba(255,255,255,1): 


border-radius:5Dx: 
padding: 3px 0: 
text-align: center: 
color: #616161: 
text-decoration:none: 
font-weight: bold: 
font-size: 12px: 


] 


民 訓 マウ ス オ ー バ ー 時 の 設定 
井 mainContent #goodsSpec dd#goodsFavorite a:hovert 
background-color:#B3A966: 
box-shadow:inset Opx Opx Opx 1px rgba(220.217.193.1): 
color: #FFF: 
} 


の つい た ボタ ン の 表現 





グラ デー ショ ン と ハイ ライ ト の ある ボ ポ 
タン を 作り ます 区 語 。 

HTML は 、 先 ほど の フラ ッ ト タ イプ の 
ボタ ン と 同じ 構成 で す 民 婁 。 


グラ デー ショ ン と ハイ ライ ト の ある ボタ ン 





CC 選 HTML 


<dd><a href=" 春 "> ログ イン </a></dd> 


ボタ ン の ベー ス は 、 先 ほど の ボタ ン と 
同じ よう な 感じ で 作り ます 民 証 。 

ハイ ライ ト も 、 先 ほど の イン ライ ン の 
影 と 同じ プロ パテ ィ を 利用 し ます 。 
px 指定 の 数 値 が 、 前 の ボタ ン は 4 つ 
(x、y、 ぼ か し 、 影 の サイ ズ ) で し た が 、 
今回 は は つ に な っ て いま す 。 こ の 場合 
は x、y、 ぼ か し の 指定 に な り ま す 馬 園 。 
テキ スト の フチ は 、text-shadow で 付 
け ま し ょ う 慌 調 。text-shadow の 値 の 
設定 も 、box-shadow と 同じ よう な 付 
け 方 で 行え ます 。 
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[市 ボタ ン の ベー ス 
#header dda{ 
display:block: 
width: 100px: 
text-align:center: 
font-weight:bold: 
color: #FFF: 
font-size: 12px: 


line-height: 25pxi 
text-decoration: nonei 
border-radius: 13px: 

border: 1px solid #5C6F91: 
box-shadow:inset 1px 1px Opx 
rgba(255.255,255.0.2): 

} 


box-shadow の 設定 


box-shadow:inset 1px 1px Opx rgba(255,255,255.0.2): 


E 評 text-shadow の 設定 


#headerdda{ 
display:block: 
width: 100px: 
ー 省略 一 


text-shadow:Opx 0px 2px rgba(0,0,0,0.45): 
一 省略 一 
} 





ーー 一 一 


ーー 一 一 - 一 


デー ショ ン を 設定 し ます 。 
で は 回 還 の よう に 、2 色 の グラ デ 


区 衣 sample.css 
/* Firefox 7 
background-image: 
-moz-linear-gradient( 
rgb(162.181.216), 
rgb(113,.138,180)): 


/* Webkit 7 
background-image: 


デー ジョ ンジ に な っ で ゆい まず 。 

ベン ダー プレ フィ ックス の 設定 が 必要 
な の で 、 接 頭 子 の 違う 同じ 記述 を 3 回 
行い ます 臣 廊 。 


ロ 





-webkit-linear-gradient( 
rgb(162,.181.216), 
rgb(113.138.180)): 


background-image: 





linear-gradient( 
rgb(162.181.216). 
rgb(113.138,180)): 


IE 対策 を 考え る 


この 状態 で 、IE で 見 て みる と どう で し 

ょ うか 。IE9 は 角 丸 が 生き て いま す が 、 

IE8 で は まっ た く 設 定 が 生き て いま せ 

ん 回避 。 

IE で も 角 丸 に な る ライ ブラ リ が あり 

ます が 、 動 作 が 不安 定 だ っ た り 重 か っ 

た りす る の で 、 こ こ で は あえ て 使わ な 

いこ と に し ます 。 

IE に は 独自 機能 の filter に グラ デー シ 

ョ ン 機 能 が あり ます の で 、 そ れ を 使っ 

て み ま す 絞 軸 。 

フィ ル タ を 使っ て みた と ころ 、IE9 で 

は 角 丸 を 突き 抜け て し まい まし た 層 語 。 

外部 ライ ブラ リ を 利用 せ ず に 、 で きる 

だ け IE 対 策 を する 場合 は 、 以下 の よう 

に 対応 する こと に し ます 。 

人 @IE9 は 角 丸 温存 、 グ ラ デ ー シ ョ ン は 
あき ら め る 

信 IE8 は 角 丸 を あき ら め て 、filter で グ 
ラ デ ー シ ョ ン を 再現 する 


filter の グラ デー ショ ン 機 能 を 適用 


IEB、IE9 で の 表示 
IE9 [ | 


月 filter の 設定 (ie8.css) 


filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr = 胡 fa2b5d8,endColorstr = 
# 作 718ab4.GradientType = 0): 


-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = 
#ffa2b5d8.endColorstr = #ff718ab4,GradientType = 0)": 








MEM0 


CSS3 の 利用 が 向い て いる サイ ト の ひと つと し て 、 画 像 を 極力 使わ ず に 素早 い 表示 が 求め ら 
れる タイ プ の も の が あり ます 。 す べ て の プラ ウザ で の 表示 を 同じ に する より 、 動 画 サ イト な 
ど に 代表 され る 、 表 示 の 快適 さ を 優先 する サイ ト で す 。 

ここ で 紹介 し て いる 、IE 用 の ライ ブラ リ を 使用 し な い 方 法 も 、 快 適さ を 優先 する サイ ト の 制 
作 時 な ど に 参考 に し て くだ さい 。 











MEM0 


上 記 の よう に IE の 過去 バー ジョ ン な ど 、 古 い プ ラウ ザ の 見 栄え を 無理 に 揃え ず に 、CSS3 な どの 最新 技術 に 対応 し た モダ ンプ ラウ ザ で は より リリ 
ッ チ な 見 栄え を 表現 する こと を プロ グレ ッ シ プ ブ ・ エ ン ハ ンス メン ト と 言い ます 。 

古い プラ ウザ と 新しい プラ ウザ で 、 見 た 目 が 違っ て も 同じ 情報 を 得る こと が で き 、 無 理 に デザ イン を 合わ せな いこ と に よっ て 軽快 な 動作 を 得る 
こと が で きま す 。「 プ ログ レッ シ プ ・ エ ン ハ ンス メン ト 」 に つい て は 、INTRODUCTION「CSS3 使 用 時 の 設計 指針 と 注意 点 」 の 項目 (16 ペ ー ジ ) 


も ご 覧 くだ さい 。 
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CHAPTER 04 


デザ イン パー ツ 


応 IE8 以 下 向 け の 案件 分 岐 


<!--[if tte IE 8]> 
IE9 対策 の 具体 的 な 方 法 と し て 、 痛 景 <link re="stylesheet" href="ie8.css" type="text/css" /> 
色 を 追記 し ます 。 色 は グラ デー ショ ン <![endif--> 
の 中 か ら 、 メ イン の 色 に 一 番 近い 部 分 
を 選び まし ょ う 区 罰 。 [[ 計 | IE 向け 対策 を 施し た 状態 
IE8 以下 の バー ジョ ン 向 け に は 、 条 件 
分 岐 で 別 CS55 フ ァイル を 読み 込ま せ IE8 
て 区 調 、 そ こ に filter の 記述 を 入れ ま 了 
す 。 


最終 的 に は 民 調 の よう に な り ま す 。 


当 | 背景 色 を 選ぶ 





IE9 


Site sample ーーmeenm mw" 








“つや "の ある グラ デー ショ ン の 表現 


届 記 つや グラ デー ショ ン の ある ボタ ン 七 月 ボタ ン の HTML 


<dd id="goodsCart"><a href="#"> 
次 は 、 つ や の ある グラ デー ショ ン の ポ カー ト に 入れ る < な ><70G> 
タン を 作り ます 葬 語 。 
HTML は これ まで と 同じ 構成 で す 屋 軸 。 
先ほど の ボタ ン の グラ デー ショ ン に 利 
用 し た 色 は 2 色 で す が 、 今 度 は 4 色 使 
いま す 民 語 。 0% R:182 G:94 B:152 


ー ト に 入れ る 時 還 R:157 G:83 B:133 
カー ド に 入れ る 506 Ri131 6.47 B:101 


100% R:97 G:34 B:75 


貞 ま 4 色 の グラ デー ショ ン 
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3 色 以 上 の グラ デー ショ ン を 使う 場合 
は 、 色 設定 の 後ろ に 色 の 位置 情報 も 入 
れ ま す 。 今回 は % を 利用 し て いま す 
が 、px 指定 も で きま す 騙 還 。 

50% の 値 が 2 つ あ り ま す が 、 こ うす る 
こと に よっ て 、 中 央 で 色 が 切り 替わっ 
た よう な グラ デー ショ ン を 表現 で きま 





旧記 グラ デー ショ ン の 色 ・ 位 置 の 設定 


background-image: 
Uinear-gradient( 
rgb(182.94.152) 0%, 


rgb(157.83.133) 50%, 
rgb(131.47.101) 50%, 


rgb(97.34.75) 100%): 


TIPS 

グラ デー ショ ン の 色 設 定 に は 、rgb 以 外 
に 、 従来 の # を 利用 し た 16 進 法 で の 指 
定 も で きま す 。 慣れ 親しん だ 16 進 法 よ 
り も rgb を 使う 利点 の ひと つ は 、 ア ルフ 
ァ 値 を 含ん だ rgba で の 指定 方 法 と 親和 
性 が 高く 、 使 い 勝手 が いい か ら で す 。 


グラ デー ショ ン の 値 指定 に % を 今回 
採用 し た の は 、% で グラ デー ショ ン の 
色 位置 が 表示 され る の で 、 ボ タン の 高 
さ が 多 少 変 わっ て も 色 の 配分 が 変わ ら 
な いか ら で す 罰 語 。 

同じ 色合い で 小さ い ボ タン や 大 きい ボ 
タン を 作成 する 場合 、、 グ ラ デ ー シ ョ 
ン の 値 を 変え ず に 完成 で きま す 。 


TIPS < 


今回 の デザ イン は 縦 方 向 の グラ デー ショ ン ば か り で し た 
が 、 そ の 他 の 角度 の グラ デー ショ ン も 使う こと が で きま 
す 。「20deg」 の よう に 色 指 定 の 前 に 角度 を 指定 し ます 
01。deg と いう の は あま りな じみ が な い 単位 で す が 、 角 


度 の 単位 の 「 度 」 と 同じ 意味 で す 。 


01 グラ デー ショ ン の 角度 の 指定 


background-image: 
linear-gradient(20deg, 
rgb(182.94,152). 
rgb(97.34.75)): 


LUSION] 


是 目 ボタ ン の 高 さ 変更 で 色 の 配分 は 変わ ら な い 









deg 指定 な し 0deg 


120deg 


02 さま ざま な deg の 値 を 入れ て みた グラ デー ショ ェ ン 


180deg -30deg 


120deg 150deg -60deg 











の 大 事 な 要 素 で ある グラ デー ショ ン は 、 


紹介 し た 以上 に 、 も っ と ざま ざま な 


どん どん 色 を 重ね て グロ ッ シ ー な 輝き を 出し た り 、 円 


状 の グラ デー ショ ン な ど を つけ た り 


も 可能 で す 。 





、 対 応 し て いな い ブ ラウ 
て し まう の で 、 様 子 を み 
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CHAPTER 04 


デザ イン パー ツ 


HSLA に よる 色 指 定 を 使っ た 
= ピス ソレ レー アー セン レノ 





色相 (H)・ 彩 度 (S)・ 明 度 (L)・ 不 透 
明度 (《 プア ルフ ァ ) で 色 指 定 を する 
HSLA 使っ て 、 色 の 需 移 が イメ ー ジ し や 
すい カラ ー ア ニメーション を 作成 し ます 。 


js smply ddmmy 回 


tableware kitchen 思 rniture others 
制作 ・ 文 山本 圭 助 
(株 式 会 社 ラナ デザ イン アソ シ エ イ ツ ) 


に 1 り 【 つ いた 1g コ kitchen illittlr- 


制作 の ポイ ント 


遇 アル ファ 値 (A) の 指定 


ー tableware 一 kitchen ililitilr コ others 下 色 が ゆっ くり 変わ っ て いく カラ ー ア ニ 
メー ショ ン 
財 ア ニメーション の 開始 時 間 を ずら すこ 
っ tableware 一 kitchen 一 furniture 一 others と で 、 波 打つ よう な 表現 も 可能 


tableware Piei【dil > furniture 一 others 





LE > PE [safsr > 5 以上 








メ 





1 リリ 【 ユ コッ た lg コ kitchen furniture others 








| irefex ノ 8 以上 ] [chrome >15 以上 | 


※IE は animation プロ パテ ィ に 非 対 応 。 


HSLA に よる 色 指 定 アニ メー ショ ン の 時 間 差 再生 


色相 ・ 彩 度 ・ 明 度 ・ 
不透明 度 の 4 つの 要 
素 で 色 指定 を 行い ま 
す 。 色 の 変化 が 直感 
的 に 理解 で きま す 。 


複数 の オプ ジェ クト に 対し て 、 色 の グラ デー ショ ン を 時 間 差 で 
再生 する こと に より 、 波 打つ よう な 表現 が 可能 に な り ま す 。 


っ っ tableware kitchen 師 
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こよ る カラ ー の 指定 





回 軸 CSS で 色 を 指定 する 方 法 口 民 色相 環 
』 color: red: 
CSS で は 、 四 証 の よう に 色 を 指定 する color: #f00: 
方 法 が いろ いろ 用 意 さ れ て いま す 。 color: #ff0000: 
HSLA も その うち の ひと つ で 、 色 相 と color: rgb(255. 0.0): 
彩 度 と 明度 の 色 指定 に 透過 度 を 加え た に DISEDIe 
も の で す 四 昭 。 color: hsl(0, 100%, 50%): 


color: hsla(0, 100%, 50%. 1): 





色相 (H) は 、 円 形 に 色 を 並べ た と き 
の 角度 (0 359) で 指定 し ます 。 赤 
が 0 度 、 緑 が 120 度 、 青 が 240 度 に あ 
た り ま す 回 証 。 彩 度 (5S) は 0 一 100% 
で 指定 し ます 。0% で 灰色 、 100% で 最 
も 鮮やか な 色 に な り ま す 。 

明度 ([) は 0 一 100% で 指定 し ます 。 





口 情 HSLA の 意味 と 指定 で きる 数 値 





ー 頭 文字 | 要素 指定 で きる 数 値 
0% で 黒色 、50% で 色相 で 指定 し た 色 、 Hue (色相 ) 0 359 
100% で 白色 に な り ま す 。 S | Saturation ( 彩 度 ) 0 て 100% 
RGB 方 式 よ り も 直感 的 に 色 を イメ ー L Lightness (明度 ) 0 一 100% 
ジ で き 、 微 妙 な 変更 も 加え や すい と い A | Alpha (不肖 明 度 ) 00 一 10 


う メ リッ ト が あり ます 。 


区 市 リン ク 文 頭 の テキ スト アイ コン 





リン ク の 文頭 に 付け た テキ スト アイ コ 
ン ( 避 還 の 矢印 部 分 ) に 、HSLA で 色 


LEIUIS い Clk コ Eiteildil Hittir コ others 


を 指定 し ます 区 罰 可 計 。 

IE8 以下 は HSL 方 式 に 非 対 応 な の で 、 

その 代替 も 記述 し て お きま す 。 じ 記 テキ スト アイ コン に HSLA で 色 を 付け る 
// HTML 
<ul> 


<li><span class="icon"> 一 </span><a href="#">table ware</a></l> 
<li><span class="i ">kitchen</a></ll> 
<li><span class="i ">furniure</a></l> 






<li><span class="icon"> つ </span><a href="#">others</a></l> 
</u> 


// CSS 
-icon { 

color: #f07575: 

color: hsla(0, 80%, 7096, 1): 
} 


区 評 テキ スト アイ コン に 色 が 付い た 


tableware kitchen [Tlttr= others 
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CHAPTER 04 





03 


次 に 、@keyframes で 色相 が 順に 変化 
し て いく アニ メー ショ ン 「color- 
anime」 を 作成 し ます 民 還 。 


色相 が 順に 変化 する アニ メー ショ ン 





//Chrome. safari = 

@-webkit-keyframes color-animet 
0%{ color: hsla( 0.80%. 70%, 1):} 
20% {color: hsla( 72. 80%, 70%, 1):} 
4096 { color: hsla(144, 809%, 70%. 1):} 
609% { color: hsla(216, 80%, 70%, 1):} 
80% { color: hsla(288, 80%. 70%, 1):} 











0%{ color: hsla( 0.80%, 70%, 1):} 
209% { color: hsla( 72. 80%, 70%, 1):} 
40% { color: hsla(144, 80%, 70%, 1):} 





60% {color: hsla(216, 80%, 70%, 1):] 
80% {color: hsla(288, 80%, 70%, 1): 





100% { color: hsla(360. 80%, 70%.1:) 


1009% {color: hsla(360. 80%, 70%, 1):} 





04 


animation プロ パテ ィ で 、 ア ニ メ ー シ 
ョ ン 「color-anime」 を 実行 し ます 隊 呈 
2。 


@keyframes アニ メー ショ ン 名 人 { 
_0% また は from { 


開始 。 変更 し た い プ ロ パ ティ と 値 を 記述 。 





} 
100% また は to( 





終了 変更 し た い プ ロバ ティ と 値 を 記述 。 


市 | アニ メー ショ ン を 再生 する 


animation-name: color-anime: 





animation-duration: 205: 


animation-timing-function: easei 








animation-delay: 0s: 


animation-count: infinite: 


ベン ダー プレ フィ ックス を 付け る 





-icon { 


-webkit-animation: color-anime 20s ease 05 infinite: 





-moz-animation: color-anime 20s ease 0s infinite: 


+ 


animation-name: 


animation-duration: 


animation-timing-function: 
animation-delay: 


animation-iteration-count: 


animation-direction: 


animation- 宙 |-mode: 


animation: name duration timing-function delsy iteration 
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COE け MN 


@keyframes で 指定 し た アニ メー ショ ン 名 


1 回 の アニ メー ショ ン に か ける 時 間 。 単 位 は s 
( 秒 ) か ms (ミリ 秒 ) で 、 デ フォ ルト は 0s (0 
の 時 も 単位 が 必要 ) 


アニ メー ショ ン 時 の イー ジン グ 。 デ フォ ルト は 
ease : 


開始 まで の 待ち 時 間 


実行 回 数 。 デ フォ ルト は 1。infinite で 無限 回 
数 も 指定 可能 2 


方 向 。 デ フォ ルト は normal で 一 方 方 向 。 
alternate で 偶数 回 目 の ア ニメーション を 逆転 


アニ メー ショ ン 実 行 前 後に @keyframes の 3 


_ 0%(from) や 100%(to) に 指定 し た 値 を 適用 する 
. か どう か 1 








se 


ei 


4 つ あ る リン ク の アイ コン を 左 か ら 少 
し ずつ ずら し で 実行 し で い X と で ト 
波打つ よう な アニ メー ショ ン を 表現 し 
ます 。 

HTML に クラ ス 名 を 追加 し ます e 
次 に 、1 つ ずつ animation-delay (アニ 
メー ショ ン の 開始 時 間 の 遅延 ) を 設定 
し ます o 








クラ ス 名 を 追加 する 


<u> 


<li class="list-0"><span class="icon"> つ </span><a href 


"#">table ware</a></|i> 


<li class="list-1"><span class="icon"> 一 </span><a href=" 弁 ">kitchen</a></> 


<li class="list-2"><span class="icon"> 一 </span><a href=" 夫 ">furniure</a></l> 
<li class="list-3"><span class="icon"> 一 </span><a href="#">others</a></l> 


<u> 


アニ メー ショ ン を 2 秒 ず つ ず らし て 実行 する 


-list-0 .icon { -webkit-animation-delay: 0s: -moz-animation-delay: 0s: } 


-list-1 .icon { -webkit-animation-delay: 25: 


これ で 、 ア ニメーション が 2 秒 ずつ 遅 
れ て 開始 され る よう に な り ま し た 。 


-list-2 .icon { -webkit-animation-delay: 45 


.list-3 .icon { -webkit-animation-delay: 6s, 


テキ スト アイ コン を CSS で 表示 する 


:-moz-animation-delay: 25: 
: -moz-animation-delay: 45: } 


: -moz-animation-delay: 6s: } 


擬似 タラス :before に 対応 し た プラ ウザ な ら 、 


表示 する こと も で きま す 。 


変更 前 
7// HTML 


<ul> 
<li><span class="icon"> 一 </span><a href= 


<li><span class="icon"> 一 </span><a href= 


<li><span class="icon"> 一 </span><a href=" 


<li><span class="icon"> 一 </span><a href= 


<7ul> 


// CSS 
-icon 【 
color: #07575, 
color: hsla(0, 80%, 70%, 1): 


まとめ [COoNCLUSION] 


簡易 さか ら 色 指定 は 16 進 
#FFO000) や 色 言 葉 (red や white) 
いか と 思い ます が 、HSL 方 式 は 直感 的 
で き 、 微 交 
時 


な 





で 紹介 し た コー ド | を 9: の よう に 変更 する こと で 、CSS で テキ スト アイ コン を 


変更 後 
7// HTML 


<ul> 
" 二 >table ware</a></l> <li><a href="# が ">table ware</a></l> 


“"#>kitchen</a></l> <li><a href="# が ">kitchen</a></l> 





">furniure</a></ll> <li><a href=" が ">furniure</a></> 


"#">others</a></> <li><a hre 和 =" 硬 ">others</a></li> 


<7ul> 


// CSS 
li:before { 

content: " つ 

color: #f07575: 

color: hsla(0. 809%, 7096, 1): 
) 


めやす く な り ま す 。 

EluliuEituy 有 4=PA セ ja 
て HSLA 指 定 に も 対 
いく と よい で し ょ う 。 


に 対応 し て いる プラ ウザ は すべ 


に た 銘 ぃ し て いる の で 、 積 極 的 に 使っ て 
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レン レプ ム バ ニン 4 


に ョ ウシ ルル くう 1 ウニ 
読 性 の 高い テー ブル 





テー ブル の 可読性 を 上 げ る スタ イリ ング 
は 、 こ れ ま で も プロ グラ ム で クラ ス 名 を 
付与 すれ ば 可能 で し た が 、 擬 似 ク ラス を 
使う こと で 、HTML に 手 を 加え ず に CSS 
の み で スタ イリ ング が で きる よう に な り ま 
す 。 こ れ に よっ て 、 開 発 工数 の 削減 や メ 
ン テ ナ ンス 性 アッ プ に つなが り ま す 。 


MdN Card で 


ドッ プ で 利用 明 で 利用 可能 キャ ッ シ ン グ 


カー ド ご 利用 明細 


確定 済み の 明細 を ご 確認 


2012 年 月 25 日 お 振替 分 の カー ド ご 利用 肌 編 


ご 利用 日 ご 利用 先 ご 利用 金額 。 支払 区 分 お 払 金 





10.000 1 固 10.000 


制作 ・ 文 山田 敬 美 


F コビー 制作 の ボイン ト 

四 行 は 背景 色 、 列 は デキ スト の 配置 を 指 
定 する 

時 カー ソル の ある 行 を ハイ ライ ト さ せる 
四 空 の セル に は 別 の スタ イル を 適用 する 


9 以上 | 











合計 203189 101.790 IIE | Safari > 3 以上 ] 


| Firefox 5 以上 | | Chrome 〉 2 以上 | 
※ 上 記 は :nth-child() の 対応 プラ ウザ 。 
※JavaScript ラ イプ ラリ 使用 時 は IE6 から 対応 。 


CSS の み で 列 に 対し て スタ イル を 指定 空 の セル に の み 指 定 し た 文字 列 を 表示 




















:nth-child(N) を td に 擬似 クタ ラス の 支払 区 分 お 支払 金額 メモ 
対し て 指定 する こと empty と 、 擬似 要素 
で 、 列 ご と に 個別 に の :before を 組み 合 300 
スタ イル を 適用 し ま わせ る こと で 、 空 の 
す 。 セル に の み 指 定 し た 10.000 
文字 列 を 表示 で きま Time Capsule 
す 。 攻 6.327 
1 回 5.527 
3.620 ご 挨拶 用 の お 菓子 
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03 | 擬似 クラ ス を 利用 し た 可読性 の 高い テー ブル 











避 間 ベー ス と な る テー プル 

ロ MEM0 MdN Card まり" 
まず は 絡 証 の よう な 、 ベ ー ス と な る シ 以降 の ステ ッ プ で は 、 こ の ベー ス と な る 
ンプ ル な テー ブル を HTML と CSS で 作 HTML を 一 切 変更 する こと な く 、CSS の 


み で 指定 を し て いき ます 。 ae 
成 し ま す 回 認 。 6 5 











口 民 】 ベース の HTML (必要 な 部 分 の み 抜粋) 


<table> 





<tr> 
<td>2011/12/07</td><td> 密 林 .C0.JP</td><td>6,.327</td><td>1 回 </td><td>6.327</td><td></ 
td> 


</tr> 





<tr> Aya W 
<td>2011/12/09</td><td> 梅 坂 屋 上 野 店 </td><td>3,620</td><td>1 回 </td><td>3.620</td><td> に 4 抽 … う 結 敵 綿 に て 
ご 挨拶 用 の お 菓子 </td> ao 


</tr> 














<tr> 
<td>2011/12/09</td><td> 有 印 良品 </td><td>17.196</td><td> リボ </td><td></td><td></td> 
</tr> 


</table> 


奇数 行 と 偶数 行 で 異な る 背景 色 を 指定 


[| 奇数 行 を 白 、 偶 数 行 を グレー に し た テー ブル 


MdN Card 2 3 ei 
goo 


カー ド ご 利用 晴 幼 


必 み の 箇 引 を ご 生 まで 


奇数 行 と 偶数 行 で 背景 色 を 変え る こと 
で 、 そ れ ぞ れ の 行 を 見 や すく し ます 
茎 還 。 こ れ ま で は 、tr タ グ に class= 
"odd" や class="even" な ど 、 ク ラス 名 
を 個別 に 記述 する 必要 が あり まし た が 、 
CSS3 の :nth-child(odd / even) を 使え 
ば 、CSS だ け で 指定 で きま す 。 

CSS の 記述 は 革 軸 の と お り 、 と て も シ 
ンプ ル で す 。:nth-child(odd) で 奇数 行 
を 、:nth-child(even) で 偶数 行 を 指定 し 
ます 。 どちら か 片方 の み で も 使え ます 。 


6121 月 35 日 和合 の カード さ 莉 細 


ご 間 日 EL 


ご 笠 用例 名 。 支 和 区 。 支払 人 メモ 





上 三 |nth-child(odd / even) で 、 








MEM0 


:nth-child(odd / even) で は 、「 前 か ら N 
番目 」 と いう 指定 の N 部 分 に 数 字 で は な 
く 「odd」 と 「even」 と いう キー ワー ド 
を 使う こと で 、 奇 数 と 偶数 に 対し て スタ 
イル を 指定 で きま す 。 








奇数 と 偶数 それ ぞ れ の 背景 色 を 指定 


table tr:nth-child(odd) td { 
background: 才 ff: 

} 

table tr:nth-child(even) td { 
background: 狼 3f3f3: 


TIPS る コ 


:nth-child(odd) と :nth-child(even) は そ 
れ ぞ れ 、:nth-child(2n+1)、:nth-child(2n) 
と 記述 する こと も で きま す 。 
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CHAPTER 04 い 








10 行 ご と に border の 太 さ を 変更 


上 に 滞 | 10 行 ご と に border を 太く し た テー ブル 
MdN Card 





10 行 ご と に border を 太く し て 目印 に 
する こと で 、 ひ と 目 で だ いた い の 行 数 カー ド こ 利用 婁 幼 

を 把握 で きる よう に し ます 区 六 。 連 続 詰み の 晴天 を 生計 いた だ け ます 
する 要素 に 対す る 繰り 返し の 指定 を す 





2012 征 1 月 25 昌 お 村 分 の カー ド ご 幸明 











で 利用 日 ご 昔 用 先 ご 利用 金 宮 表 払 大分 お 支払 銘 ネモ 
る に は 、:nth-child(An+B) を 使い ます 。 Std1 | ファ ンタ ル 23 ネ 

3waer ee< 問 還 ao 

mhnae Am | 運 |iago 

tviaer | 人 oo PE 昌 昌 し 
MEM0 2011209 110o 1 F ビ コ 
:nth-child(An+B) で は 、 昌 個 目 の 要素 に に ーー ーー 
対す る 指定 を 、A 個 ご と に 繰り 返す こと aottnoe mm 補 天 ドー 9 
が で きま す 。 2011210 寺 條 COJP ュ 67z 1 3.873 

910212 MONS@ 林 人 aa 。 im aa 








上 昭 nth-child(An+B) で 10 行 ご と に border-bottom を 3px に 指定 
table tr:nth-child(10n+10) td { 

CSS の 指定 方 法 は 、 民 罰 の と お り で す 。 border-bottom: 3px solid #ccc: 
ここ で は 、 10 個 目 の tr 要素 に 含ま れる } 
td の border-bottom を 太く し て いま す 。 
それ を 10 行 ご と に 繰り 返す た め 、 
:nth-child(10n+10) と いう 指定 に な り 
ます 。 


列 ご と に テキ スト の 自 





置 を 指定 


記 nth-child(N) を 使わ な い 場合 の HTML 












































<table> <td class="option">1 回 </td> 
テー ブル の 列 に 対し て 、 右 寄せ 左寄せ <tr> <td class="price-2">3.620</td> 
な どの テキ スト の 配置 を 指定 し た い 場 <td class="date">2011/12/07</td> <td class="memo"> ご 挨拶 用 の お 菓子 </td> 
合 、 こ れ ま で は 、td 要 素 ひ と つ ひ と つ <td class="shop"> 密 林 .C0.JP</td> tr> 
に 個別 に クラ ス 名 を 振ら な けれ ば な り <td class="price-1">6.327</td> <tr> ト 
ませ ん で し た 回 語 。 し か し 、:nth- <td class="option">1 回 </td> <td class="date">2011/12/09</td> 
- 夫 二 の _ <td class="price-2">6.327</td> <td class="shop"> 有 印 良 品 </td> 
child(N) を 使え ば 、HTML に 手 を 加え <td class="memo"></td> <td class="price-1">17.196</td> 7 
る こと な く 、 列 に 対し て 自由 に スタ イ </tr> <td class="option"> リ ボ </td> く 
ル を 指定 で きま す 世 軸 。 <tr> <td class="price-2"></td> G 
<td class="date">2011/12/09</td> <td class="memo"></td> 
<td class="shop"> 梅 坂 屋 上 野 店 </td> </tr> 
<td class="price-1">3.620</td> マ /table> 
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[ 評 列 ご と に テキ スト の 配置 を 指定 し た テー ブル 


MdN Card = om 
kc28ーーー5 和 SA 


カー ド こ 利用 還 細 
か の 本 い た だら 
を !swWiG 和 キム ー ド ご 


sma maa Se 相 





CSS の 指定 方 法 は 了 還 の と お り で す 。 
左 か ら 順 番 に 数 えて N 番 目 の td 要 素 
に 対し て 、text-align プロ パテ ィ を 使 
い 、 テ キス ト の 配置 を 指定 し ます 。 





MEMO0 


:nth-child(N) で は 、() 内 で 指定 し た N 
個 目 の 要素 に 対し て スタ イル を 指定 で 
きま す 。 








colgroup 要素 や col 要素 へ の text-align 


列 を グル ー プ 化す る colgroup 要素 や col 要素 へ の text-align の 指定 は 、IE8 か 
ら 使え な く な り ま し た 。 こ れ は 、 W3C の 仕様 に 則っ た 正しい 実装 で 、 ほ か の 
モダ ンプ ブラ ウザ で も 同様 に 機能 し ませ ん 。 


上 軸 nth-child(N) で テキ スト の 配置 を 指定 


table td:nth-child(1) { text-align: center:} セル を 一 部 結合 し て いる な どの 複雑 
と な テー ブル の 場合 は 、 指 定 し た 順番 
table td:nth-child(2) { text-align: left: } 
| が ズレ て し まう た め 、 こ の 方 法 は 合 
table td:nth-child(3) { text-align: right: } 


えま せん 。 
table td:nth-child(4) { text-align: center: 
table td:nth-child(5) { text-align: right } 
table td:nth-child(6) { text-align: left: } 


カ ある 行 を ハイ ライ ト 


カー ソル の ある 行 を ハイ ライ ト す る こ 
と で 、 横 軸 の デー タ を 見 や すく し ます 
臣 吊 。 こ れ ま で は 、JavaScript で hover 
持 に クラ ス 名 を 追加 する な ど で 対 応 し 
て いま し た が 紅 国 、 ユ ー ザ ー ア クシ ョ 
ン 擬 似 ク ラス の :hover を 使う こと で 、 
CSS の み で 対応 可能 で す 。 





MEM0 








:hover 擬 似 ク ラス は CS5S3 で は な く 、 
CSS2 か ら 利用 可能 な 擬似 タラ ス で す 。IE 
で も 、a 要 素 の み で あれ ば IE6 か ら 、 そ の 
他 の 要素 に 対し て は IE7 か ら 実装 され て 
いま す 。 








曲 員 カー ソル の ある 行 を 黄色 く ハ イラ イト し た テー ブル 旧友 」 :hover を 使わ な い 場 合 の HTML 


MdN Card 時 朱 時 <table> 

<tr> 

<td>2011/12/07</td><td> 密 林 . 

CO0.JP</td><td>6,327</td><td>1 

</td><td>6.327</td><td></td> 

</tr> 

ーー <tr class="hover"><!--JavaScript 

Ra で .hover を 付与 --> 

ーーー <td>2011/12/09</td><td> 梅 坂 屋 上 
野 店 </td><td>3,.620</td><td>1 回 </ 
td><td>3,.620</td><td> ご 挨拶 用 の 

本 お 菓子 </td> 

</tr> 





回 


























<tr> 








ee <td>2011/12/09</td><td> 有 印 良品 
5 "器量 </td><td>17.196</td><td> リ ボ </ 
ーー 2 td><td></td><td></td> 
os っ 、 sss | </tr> 
</table> 
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CHAPTER 04 


デザ イン パー ツ 


CSS の 指定 方 法 は 区 市 の と お り で す 。 
現在 カー ソル が ある Tr 要素 ( 行 ) に 含 
まれ る td 要素 の 背景 色 を 変更 し ます 。 





選 記 :hover で 現在 カー ソル の ある 行 を ハイ ライ ト 


table tr:hover td { 
background: #fdfbe0: 


しみ ん も て て よく さら すう か 
ささ 
RS 3 





空 の セル に 文字 列 を 表示 


:empty 擬似 クラ ス を 使う と 、 中 身 が な 
い 空 の セル に 対し て の み 、 特 定 の スタ 
イル を 指定 する こと が で きま す 。 こ れ 
を 利用 し て 、 空 の セル に 「-」 と いう 文 
字 列 を 表示 させ た 上 で 、 そ の セル の み 
中 央 揃え に し ます 医 軸 。 こ れ ま で は 、 
プロ グラ ム で 文字 列 を 挿入 する か 、 手 
作業 で 記述 する 必要 が あり まし た が 、 
今回 は CSS の み で 実装 し ます 。 





CSS の 指定 方 法 は 騙 軸 の と お り で す 。 
1 つ 目 の td:empty で 空 の セル の み 中 央 
揃え に し 、2 つ 目 の td:empty:before で 
「-」 と いう 文字 列 を 出力 し ます 。 








MEM0 





limportant を つけ る こと で 、 で の テキ 
スト 配置 の 指定 より も :empty で の 指定 
を 優先 させ て いま す 。 
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届 記 空 の セル に 「-」 を 表示 し た テー ブル 


MdN Card = デビ > res 
SB ニー 
カー ド こ We 





擬似 要素 と は 


:before は 擬似 クラ ス と 同じ よう に コロ ン (:) か ら 始 まり ます が 、「 擬 似 要 素 」 
と いう 種別 で す 。 擬似 クラ ス が 要素 の 状態 に 対し て スタ イル を 適用 で きる の に 
対し 、 擬 似 要素 は 要素 内 の 特定 の 文字 に 対す る スタ イル 指定 や 、HTML 上 に 存 
在 し な い コ ン テ ン ツ (文字 や 画像 な ど ) を 追加 で きる と いう 特徴 が あり ます 。 


司空 の セル に 「-」 を 表示 し 、 中 央 揃え に 変更 


table td:empty 

text-align: center !important: 
} 
table td:empty:before { 

content: "-: 








CSS3 の 擬似 クラ ス は IE9 か ら の 実装 
と な り 、 そ れ 以 前 の IE で は 利用 する こ 
と が で きま せん が 、「selectivizrjs」 と 





いう プラ グイ ン を 使う こと で 、IE8 以 
E 下 で も CSS3 の 擬似 クラス を 使っ た ス 
タイ ル 指 定 を 適用 で きる よう に な り ま 
す 器 避 。 

(selectivizrjs の 説明 に つい て は 、 

CHAPTER01-04「 ウ ィ ン ド ウサ イズ に 

連動 する リキ ッ ド タイ プ の フリ ー レ イ 
- アウ ト 」 の 54 ペ ー ジ 、MEMO も 参照 。) 
」 使い 方 は 簡単 で す 。 馬 罰 の URL か ら 
selectivizrjs を ダウ ン ロ ー ド し 、HTML 
の head 内 で 読み 込む だ け で 設置 で き 
・ ます 弦 謙 。 


まとめ [CONCLUSION] 








古 ] selectivizrjs 適用 前 (上 ) と 適用 後 ( 下 ) の IE8 の 表示 


3 を 1 上 5 日 お 生 符 分 の か ー ド ご 和 大 























WON | ご WW ! ご We Se 1 asawal 
ーー 得 "” 
Rg ag 
ビー ロ 5 
ーー ーー 
ご 
Ram 。。 =mmx 。 =mmam xumy cwweml za ト 
2 ー う 主 こ ー MEMO0 
ー 3 一 1 ここ で 取り 上 げた 擬似 クラ ス に 
ーー 関し て は IE9 で 実装 され て いま 
e す が 、IE9 が すべ て の 擬似 クラ 
ROD 3 ス に 対応 し て いる と いう わけ で 
は あり ませ ん 。 











届 抽 selectivizrjs 


http://selectivizrcom/ 


上 選 head 内 で jQuery と selectivizrjs を 読み 込む 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.minjs"></script> 
< ト -[if (gte IE 6)&(lte IE 8)]><script src="selectivizrjs"></script><l[endif]--> 





MEM0 


IE 以外 の プラ ウザ や IE9 以上 で は 必要 が な いた め 、 条 件 分 岐 コ メン ト を 使っ て IE6 か ら IE8 
に 対し て の み 読 み 込 まれ る よう 指定 し ます 。 








>、 今 か ら 使え る CSS3 の 


で し ょ う 。 擬似 タラ ス を 使っ て 、 こ れ 
っ た よう な U| に も チャ レン ジ し て 
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デザ イン パー ツ 


マー クア ッ プ の み で 表現 する 
階層 の わか りや すい ツリ ー 図 








階層 構造 が ひと 目 で わか りや すい ツリ ー 
図 を マー クア ッ プ の み で 作成 する 方 法 を 


| 
] 
上 


コー ュ 紹介 し ます 。 リ スト の 装飾 に は CS53 を 
ーー 使っ て 、IE で も 表示 が 保持 され る よう 
JavaScript を 利用 し まし た 。 
ーー 制作 ・ 文 / 中 西 祐介 
時 (株 式 会 社 ワ ン ・ ト ゥ ー・ テ ン ・ デ ザイ ン ) 
- 8 制作 の ポイ ント 
ーー 刷 シ ンプ ル な マー クア ッ プ で リス ト を 表 


お 重い 合わせ 現 
財 JavaScript で IE の 表示 に も 対応 


時 linear-gradient な どの CSS3 を 使っ 
て 装飾 


対応 プラ ウザ 


[iE 6 以上 | [safan 〉5 以 上 | 


Firefox 4 以上 | | Chrome 1( 以上 | 


※IE で は border-radius(IE6 8) 、linear-gradient 
(IE6 て 9) に 非 対 応 。 


余白 を 空け る こと で 階層 を 表現 CSS の 上 書き で クロ スプ ラウ ザ に 対応 
ツリ ー 図 の 子 要素 と な る IE で の レイ アウ 
ul すべ て の 左側 に 50px し ト の 崩れ を 防ぎ 、 製品 ・ サ ービス 一 臣 
の 余白 (margin) を 空け spy 詩 品 サー ヒス 一 臣 最低 限 の 表示 を 確 デジ タル 一 眼 レフ カメ ラ 
る こと で 、 階 層 構 造 を わ ーー> デジ タル ー 理 レフ カメ テ 保 で きる よう に 、 5 本 
6 50px 昌 レ フカ メラ 
か りや すく 表現 し まし た 。 一 筐 レフ カメ ラ CS5 を 上 書き する 
こと で 千 応 し で い コン パク ト テ ジタル カメ ラ 
RT トコ 応 
R 一 妥 レ フ 用 交換 レン ズ 
eee ます ( 左 の 画面 カ 
ニー 夫 適切 な 表示 、 対 し 広角 レン ズ 
50px て 右 の 画面 は 対策 詩 き レン ズ 
= を 施し た IE7 の 表 5 
示 )。 
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サン プル は HTML5 で 作成 し て いま す 。 
IE8 以下 の 古い プラ ウザ に も HTML5 の 
要素 を 適用 させ る た め 、「html5.js」 と 
いう JavaScript ファ イル を 読み 込み ま 
す 回 司 。 

「html5.js、」 を ここ で は 「scripts」 フ 
ォ ル ダ に 格納 し 、 index.html に 上 回 語 の 
よう に 記述 し ます 。 

< ト に --[if tte IE 8]> て <![endif--> で 囲っ 
て いる の は 条件 分 岐 コ メン ト で 、 
HTML5 に 対応 し て いな い IE8 以 下 で 
html5.js の ファ イル を 読み 込む よう に 
指示 し て いる も の で す 。 











マー クア ッ プ の み で 表現 する 階層 の わか りや すい ツリ ー 区 











htmu5js 
http://html5shim.googlecode.com/svn/trunk/html5.js 





口 朋 html5js の 読み 込み (index.htmU) 


<!--[if lte IE 8]> 
<script src="./scripts/html5.js" type="text/javascript"></script> 
<![endi--> 








| MEM0 
| "html5.js』 に つい て は 、INTRODUCTION の 「CSS3 使 用 時 の 設計 指針 と 注意 点 」(16 ペ ー 


| ジ ) も ご 覧 くだ さい 。 | 








次 に 、 プ ラウ ザ に よっ て CSS の 各 要 素 
の デフ ォ ル ト 値 が 違う の を 揃え る た め 
に 、 html5reset-1.6.1.css、」 と いう フ 
ァイル を 読み 込み ます 陸 罰 。HTML フ 
ァイル で は 工 罰 の よう に 記述 し まし た 。 


じ 制 html5reset-1.6.1.css 


http://code.google.com/p/html5resetcss/downloads/ 
detail2name=htmtl5reset-1.6.1.css&can=2&q= 


評 CSS の 読み 込み (index.htmU) 


<Uink re に "stylesheet" href-"./styles/html5reset-1.6.1.css" type="text/css" /> 
<link re に "stylesheet" href="./styles/default.css" type="text/css" /> 

<link re に "stylesheet" href="./styles/content.css" type="text/css" /> 

<!--[if lte IE 9]> 

<Uink re="stylesheet" href="./styles/ie6_7_8_9.css" type="text/css" /> 
<![endifl--> 

<!--[if lte IE > 

<link re に "stylesheet" href-"./styles/ie6.css" type="text/css" /> 

<![endi--> 


| MEM0 | < 





| Tdefault.css」 は ペー ジ 全 体 の レイ アウ ト の 大 枠 に つい て 記述 し た CSS フ ァイル で す 。 
Tcontent.css」 に は ツリ ー 図 に 適用 する スタ イル を まとめ まし た 。 こ れ ら の CSS を 「styles」 

| フォ ル ダ に 格納 し て 読み 込ま せ て いま す 。「ie6_7_8_9.css」 と 「ie6.css」 に つい て は 後述 
し ます 。 | 
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ツリ ー 図 の リス ト の マー クア ッ プ は 
要素 を 入れ 子 に する だ け で す 。 











貞 当 リス ト の 階層 (index.htmU) 


<section id="demoArea"> 
<article> 
<ul id="nav01"> 
<li><a href="/terms/"> こ の サイ ト に つい て 


</a></l> 


<li><a href="/privacy/"> 個 人 情報 保護 ポリ シー 


<7a><7l> 
<li><a href="/sitemap/"> サ イト マッ プ </a> 
<7> 

<7ul> 


ここ で は 右上 に 表示 され る リス ト は id 
を nav01 と し て 、 そ の 下 に 表示 させ た 
い リ スト は id を nav02 と し て 指定 し て 
いま す 医 是 。 


<ul id="nav02"> 





<li><a href="/news/"> ニ ュー ス </a></l> 
<li><a href="/about//> こ の サイ ト に つい て 


</a></l> 


<li><a href="/products/"> 製 品 情報 </a> 


省略 一 
</u> 
</article> 


</section><!-- /demoArea --> 


> トッ プペ ー ジ </a></l> 





ロ 


の サン プル で は 4 階層 目 ま で の 
CSS を 指定 し て いま す 。 そ れ よ り も 深 
く な る 場合 は CSS の 記述 を 追加 し て 
くだ さい 。 











上 [ 長 プラ ウザ で 表示 させ た と ころ 





リ レ る と で ヨ :1Prd 1 


[| 背景 の グラ デー ショ ン と 角 丸 の 表現 (content.css) 


リス ト を CSS3 で 装飾 し ます 。IE で は 
確認 する こと が で きま せん が 、 今 回 の 
サン プル で は background プロ パテ ィ 
の linear-gradient で 背景 は グラ デー シ 
ョ ン さ せ 、border-radius プロ バテ ィ 
で 角 丸 の 表現 も 加え て いま す 区 因 区 有 。 





上 [ 胡 』 リ スト に 背景 の グラ デー ショ 
表現 を 加え た 


ン と 角 丸 の 








#demoArea u#nav01liat 
display: block: 
padding: 8px 20px 25px: 
color: #D00: 
border: 1px solid #ffcc7f 


background: -moz-linear-gradient(top, #fff5e5, fe062): 


background: -webkit-gradient(inear, left top, left bottom, from(#fea), to(#ffe062)): 


backqround: linear-gradient(top, #fea, #ffe062): 


-webkit-border-radius: 7Px: 
-moz-border-radius: 7Px: 


border-radius: 7DX: 





MEM0 





background プロ パテ ィ の linear-gradient で 注意 すべ き 点 は 、 
Firefox と WebKit 系 ブラ ウザ (Chrome、Safari) と で 指定 の し か た が 違う 点 で す 国 。 
国 background プ ロバ パテ ィ の linear-gradient の 構文 


background: -moz-linear-gradient( 開 始 位置 と 角度 , 開始 色 , 途中 色 , 終了 色 ): 
background: -webkit-gradient(linear, 開始 位置 , 終了 位置 , from( 開 始 色 ), color-stop( 位 置 , 途中 色 ). to( 終 了 色 )): 
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リス ト の 階層 構造 は 、ul#nav02 の 子 要 
素 と な る ul すべ て の 左側 に 50px の 余 
白 を 設け る こと で 、 階 層 を 見 た 目 に わ 
か りや すく 表現 し て いま す 還 還 。 


医員 の よう に ul 要素 を 増やし て いく 
こと で 、 深 い 階 層 の 表現 が 可能 と な り 
ます 。 








記 天 余白 に よる 階層 表現 (content.css) 


左側 に 余白 を 空け て 階層 を 表現 し て いる 


#demoArea u#nav02 ul { 


margin: 1px 0 0 50px: 
} ーー 


上 当 ul 要 素 を 増やす こと で 深い 階層 を 指定 (content.css) 


#demoArea u#nav02 liat #demoArea ul#nav02 ululliat 


省略 省 格 

} } 

#demoArea ul#nav02 ullia{ #demoArea ul#nav02 ulululliat 
省略 省略 

} } 


IE で の 表示 に 備え た 対 


IE で 表示 し た 場合 で も 情報 を 読み 取 
る こと が で きる よう 、 対 策 を 施し て い 
きま す 。 

まず は 背景 色 の 設定 で す 。IE で は 
background プ ロ パ ティ の Iinear- 
gradient が 効か な いた め 、 背 景色 が 指 
定 さ れ て いな い 状 態 に 上 書き し て 色 指 
定 を し て いま す 加 語 。 





MEM0 


:first-child 擬似 タラ ス は 、 最 初 に 現れ る 
子 要素 に スタ イル を 適用 する 働き を し ま 
す 。 


IE 用 に 背景 色 を 上 書き する 指定 (ie6 7_8_9.css) 


#demoArea ul#nav01liat 
background: #fff5e5: 

由 

#demoArea ul#nav02 > Ui:first-child a { 
background: 寿 feaef: 

} 

#demoArea u#nav02 liat 
background: #e5f5fa: 

} 

#demoArea ul#nav02 ulliat 
background: #e5f5ef: 

} 

#demoArea ul#nav02 ululliat 
background: #efefefi 

} 

#demoArea u#nav02 ulululliat 
background: 才 5f5f5: 

} 
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CHAPTER 04 


IE6 の 1 要素 の 中 の a に display: block: 
と する と 余白 が で きる た め 、 員 要素 に 
display: intine: を 指定 し まし た 民 還 。 


5 階層 、 6 階層 と 深く な る 場合 は 、 前 の 
ステ ッ プ で 紹介 し て きた content.css 
に ul 要素 を 増やし ます 。 


記 制 IE6 用 の 指定 (ie6.css) 


#demoArea ul#nav02 遇 

弁 demoArea ul#nav02 ul 

#demoArea ul#nav02 ul ul li 
#demoArea ul#nav02 ul ululti{ display: 


inline: 1 


ウリ 


U ジ 


この サン プル で は 、 工 還 の よう に リン 
ク 先 を 表示 させ る JavaScript (tree- 


臣 市 リン ク 先 の 表示 (CSS 適 用 後 ) 





about/ 


prociuct 


/prociuct/Mineup.htm 


graph.js) も 作成 し まし た 。 

tree-graphjjs 殿 調 で は 、ll 要 素 の 中 の 
a 要 素 の href を 取得 し 、 span 要素 と し 
て 追加 し て いま す 。 使い 方 は HTML の 


選 有 tree-graphjs 
jQuery(functionO{ 
$(#nav01 1『).each(function() { 
var linkHref = $(this).children(a). 
attr('href'): 


$(this).append('<span>'+ linkHref +'</ 


span> ): 


): 


head 内 に 記述 し 、tree-graph.js を 読 
み 込 むだ け で す 民 語 。 

(tree-graph.js は 筆者 が 作成 し た も の 
で す の で 、 ご 自由 に お 使い くだ さい 。) 


$(#nav02 0.each(function() { 
var linkHref = $(this).children(a'). 
attr(href): 
$(this).append('<span>'+ linkHref + "</ 
Span>): 
): 
}): 


選 記 | jQuery と tree-graph.js の 読み 込み (index.htmU 


<head> 
省略 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery. 


minjs"></script> 


<script src="./scripts/tree-graph.js" type="text/javascript"></script> 


首 申 
</head> 


まとめ [coNcLUSION] 


今回 は プロ グレ ッ シ プ ・ エ ン ハ ンス メン ト の 考え 方 で 
アニ シレン ョ ウレ ルン pe ンプ ム が 


サン プル 作成 を 行い まし た 。 


ンス メン ト と は 「 ど の ユー ザー に も 同じ よう に 情報 コ 
ン テ ン ツ を 提供 する 。 その 中 で 環境 が 整っ て いる ユー 


ザー (モダ ンプ ラウ ザ 利 用 者 ) に は 、 っ 
せ 訪 で コン テン ツ を 提供 ずる 」 と いう 考え 方 で す 。 こ し ょ う 。 
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より リッ チ な 見 


うい っ た 考え 方 に 沿っ て コー ディ ング 作業 を 行う と 、 

作業 に ムダ が 少な く な り 効 率 が 上 が り ま す 。 

その 他 、 マ ー ク アッ プ す る だ け で いろ いろ な 表現 が 可 

能 に な る CSS ラ イプ ラリ も 多く 存在 し ます 。 気 に な 
た も の か ら 少 し ずつ 試し て CSS3 に 慣れ る と いい で 








IE 対策 と 表示 の 違い 


ここ で は 、IE で 表示 し た 際 に レイ アウ ト が 崩れ る の を 防い だ り 、 情 報 が 読み 取れ る よう な 最低 限 の 表示 を 確保 し た りす る た め に 、 
ie6_7_8_9.css (IE 用 ) と ie6.css (IE6 用 ) の ファ イル を 作成 し て 、CSS を 上 書き する こと で クロ スプ ラウ ザ に 対応 し まし た 。 実 
際 に 表示 が どの よう に 違う か は 、 "の キャ プチ ャ 画像 で 確認 し て くだ さい 。 





プラ ウザ に よる 表示 の 違い / Firefox IE9 
トッ プペ ー ラ 
こ ニ ユ ニス 
この サイ ト と な つい て 
1 
- サ ービス ー 條 
デジタ ルー 天 レ フカ メ ミ 
一 生 レ フカ メ ミ 
< コン バク ト テ シタ ルカ メニ 
指定 し た CSS5 が すべ て 反映 され て いる 線形 グラ デー ショ ン を 指定 する linear-gradient が 反映 され て いな い 
IE8 IE7 
トッ プペ ー ジ トッ プペ ー ジ 
ニー ス ニュ ニス 
この サイ ト に つい て に つい 
EL1 抽 晴 報 
着 呈 - サー ビス 一 筐 製 呈 - サー ビス 一覧 
タル ー 還 レフ カメ = タル ー 雷 レフ カメ ラ 
レラ カメ = - 王 レフ カメ ラ 
コン クト > タ ルカ メ テ コン バク ト テ ジ タ ルカ メラ 


線形 グラ デー ショ ン も border-radius プロ パテ ィ の 角 丸 も 反映 され て い 線形 グラ デー ショ ン も border-radius プロ パテ ィ の 角 丸 も 反映 され て い 
な い な い 。 今 回 の サン プル だ と 見 え 方 は IE8 と よく 似 て いる 


IE6 


トッ プペ ー ジ 
= ニュース 


と の サイ ト に つい て 


コン クト デジ タル カメ ラ 


線形 グラ デー ショ ン も 角 丸 も 反映 され て いな い 。 ま た 、 最初 に 現れ る 子 
要素 に スタ イル を 適用 する :first-child 擬似 タラス で の 指定 も 反映 され 
て いな いた め 、「 ト ッ プ ペー ジ 」 部 分 が 赤色 の 背景 に な っ て いな い 


この よう に 反映 され て いな い 箇 所 は あり ます が 、 ツ リー 図 と し て の 機能 や 見 え 方 は 損なわ な いよ うに し まし た 。 
CSS3 を 導入 する 場合 は 、 ク ロス プラ ウザ 対応 を どこ まで 実現 する の か 規定 し な いと 思わ ぬ 工 数 が か か る ケー ス が 少な く あ り ま 
せん 。 
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デザ イン パー ツ 


border と 背景 の 組み 合わ せ や 
outline で 実現 する 飾り 鞭 線 





CSS3 で は 、 背 景 画像 を 複数 指定 し て 組 
み 合 わせ る こと で 、 よ り 複 雑 な 背景 を 簡 
単に 実現 する こと が で きま す 。 

ボー ダー や アウ トラ イン も アル ファ 値 の 指 
定 な ど と 組み 合わ せる こと に より 、 よ り 凝 
っ た 表現 が で きる よう に な り ま し た 。 





Jan- 1, 2013 


Let me exDreSS 
the greetings of 
the season. 







制作 ・ 文 / 新 谷 剛史 (株 式 会 社 セ カン ド フ ァ ク トリ ー) 


X-Studio 


evenweeeeewewrmwee 四 ア ウト ライ ン 、 ボ ー ダ ー、 背 景 を 利用 
お 1 有人 1 し て ボー ダー に 変化 を つけ る 
ED 時 背景 画像 の 始点 が 指定 で きる こと を 
有効 活用 する 
是 幅 や 高 さ で の ボー ダー の 取り 扱い を 
理解 する 


対応 プラ ウザ 


IE 9 以上 | | 5afari 〉 5 以上 ] 





た め 、 お 問い 合わ せい た だ きま し た 内 容 に つき まし て は 科 選 以降 の 回 答 と な 


we 





| Firefox - 3.6 以上 | [chreme>10 10 〉10 以上 | 


※IE で は 一 部 に 非 対 応 。 


背景 画像 の 始点 と ボー ダー 幅 ・ 高 さと ボー ダー 
従来 、 背 景 画像 の 始点 は コン テン ツ を 基準 に し て いま し た が 、 float や ボッ クス レイ アウ ト に より マル チカ ラム レイ アウ ト を 
ボー ダー の 左上 を 背景 画像 の 始点 に で きる よう に な り ま し た 。 実現 する 場合 、 ボー ダー の 扱い が 少々 面倒 で し た が 、 ポ ボー ダー 


を 幅 や 高 さ に 含む border-box 指定 が で きる よう に な り ま し た 。 
3 Ia Ia Pa 」 PT 
【 ご 連絡 】 border-b content-b 
本 日 より 1 週間 、 業界 関係 者 向け の 展示 会 に 大 S3HsdHr9raikedyhesi 
= ます 。 予め ご 了承 の 程 よ ろ し く お 願い 申し 上 げ まく 
展示 会 の 詳細 は こち ら 


aa LaLa aa ha aa 1 コ 
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ermeeoes | 


05 | border と 背景 の 組み 合わ せ や outline で 実現 する 和 飾り 肢 線 








デッキ ララ ザ シン と ボーデ ゲー 


CSS で は 、 ボ ー ダ ー の ほか に 要素 の 輸 
郭 を 表す 線 を outline プロ パテ ィ で 指 
定 で きま す 。CS53 か ら 、 新 た に ボー 
ダー と アウ トラ イン の 間隔 を 調整 する 
outline-offset プ ロ パ ティ が 用 意 さ れ 
まし た 。 

outline-offset を 指定 する と 、 招 市 の 
よう に ボー ダー と アウ トラ イン の 間 に 
隙間 を 設定 する こと が で きま す 避 語 
回 司 。 こ の 隙間 で 見 える 背景 は 、 
outline を 指定 し た 要素 の 親 要 素 の 背 
景 で す 。 


岳 胡 】 outline-offset の 指定 (sample02 の CSS) 


divthcontt 
position:absolute: top:102px: left:427px: 
width:480px: height:270px: 


background:url(../img/bg03.png) no-repeat bottom right, 


url(./img/bg02.png) repeat top left: 
border-top:#E6C7AE 5px solid: 


outline は 輪郭 を 表す た め の 線 で す の 
で 、 ボ ポー ダー の よう に 自由 な 設定 は で 
きま せん 。 幅 ・ 高 さ な ど に は 考慮 され 
な い 点 に 注意 し まし ょ う 。 

区 王 で は 、 右 と 下 に マー ジン を 5px と 
っ た 2 つの ボッ クス を 配置 し て いま す 。 
が ドラ ゴン 。 政 一 ゲー、 マー ジ シ ち 。 
背景 が 黒い 確認 用 プロ ッ ク 要 素 と の 関 
係 を 把握 し まし ょ う 工 婦 可 司 。 

な お 、 ア ウト ライ ン の 色 に は 、CSS3 か 
ら 指 定 可能 に な っ た アル ファ 値 が 利用 
可能 で す 。 





違 胃 ボー ダー と アウ トラ イン の 間 に 隙間 を 作る (sample02.htmU 


Jan- 1 2012 


Let me exXDreSS 


| the greetings of 
the season. 


后 届 アウ トラ イン と ボー ダー (sample02.htmU 


<div class="thcont"> 
<h2>Top NEWS <span>Jan. 1, 2013</span></h2> 
<p>Let me express the greetings of the season.</p> 


</div> 


border-right:#E6C7AE 9px solid: 
border-bottom:#E6C7AE 5px solid: 
border-left:#E6C7AE 9px solidi: 
outline:#371C09 solid 1px: 
outline-offset:10px: 


叫 ボ ポー ダ ー と アウ トラ イン の 関係 
(sample02.htmU 


ビ 和 | 斜め 方 向 へ の グラ デー ショ ン 

(sample02 の CSS) 

body.top divcontent .topbox01, 

body.top divcontent .topbox02( 

float:left: 

width:120px: height:120px: 

margin:0 5px 5px 0 

background:#FOFOF0: 

border:#F33 solid 5px: 

outline:rgba(0.64.198.0.7) solid 10pxi 

] 

body.top div.content .topbox02{ 





outline-offset:10px: 


] 


芝 HTML の 記述 (sample02.htmU 
<div class="topbox01wrap"> 
<P class="topbox01"> ポ ボー ダー と アウ トラ イン の テス ト </p> 
<P class="topbox02"> ボ ポー ダー と アウ トラ イン の テス ト </p> 
<P class="checktext> ボ ポー ダー と アウ トラ イン の 関係 を 確認 する テス ト </p> 


<7div> 
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CHAPTER 04 


デザ イン パー ツ 


画像 や ブロ ッ ク 要 素 と 組み 合わ せる ボー ダー 


ボー ダー は CSS2 と ほとん ど 一 緒 で す 
が 、 ボ ー ダ ー 色 に アル ファ 値 が 指定 で 
きる よう に な り ま し た 還 還 。 

ここ で は ボー ダー 部 分 の 白 に アル ファ 
値 を 指定 し 、 ア ルフ ァ 値 が 有効 に な っ 
て いる こと を 確認 する た め 、 背 景色 を 
明る い プ ルー に し まし た 欧 史 代 避 。 

















上 に 記 ボー ダー と アウ トラ イン の 関係 





じ 計 | ボー ダー 部 分 の 白 に アル ファ 値 を 指定 (sample03 の CSS) 


p-border01 imgt 
display:inline-blocki 


-moz-box-shadow:rgba(44.39.39.0.3) 3px 3px 7px 7px: 
-webkit-box-shadow:rgba(44,39,39,0.3) 3px 3px 7px 7px: 
box-shadow:rgba(44.39.39,0.3) 3px 3px 7px 7px: 


-ms-transform:rotate(-3dedg): 
-moz-transform:rotate(-3deg): 


じ 胡 HTML の 記述 (sample03.htmU 


<P class="border01"><img at="Cherry 
blossom" src="img/spring.jpg' /></p> 


-webkit-transform:rotate(-3deg): 


-o-transform:rotate(-3deg): 


transform:rotate(-3deg): 
background:#5FD5F3: 


border:rgba(255,255,255.0.8) 10px solidi 


} 


育 景 画像 と ボー ダー を 組み 合わ せる 


ボー ダー に アル ファ 値 を 指定 し 、 背 景 
画像 を 組み 合わ せる と 、 こ の 例 の よう 
に 従来 の ボー ダー で は 難し か っ た ボー 
ダー の 表現 が で きま す 工 証 。 こ こ で は 、 
シン プル な か 市松 模様 の 背景 画像 と 組み 
合わ せま し た が 、 よ り 凝 っ た 表現 も 実 
現 で きま す 。 

ボー ダー と 背景 は div タ グ 、 コ ン テ ン 
ツ 部 分 の 白い 背景 は p タグ で 実現 し て 
いま す 区 加 3。 








上 叶 ) ボー ダー と 朋 過 を 組み 合わ せ た 例 (sample03.htmU) 





旧 HTML の 記述 (sample03.htmU 


<div class="topbox03"><p> ポ ボー ダー と 透 
過 を 組み 合わ せる と 、 こ ん な 変化 も 実現 で 
きま す 。</p></div> 


上 評 】CSS の 記述 (sample03) 


divtopbox03{ 
background:url(../img/bg04.png): 
border:rgba(95,213.243.0.6) dashed 10px: 
} 


背 景 画像 と ポー ダー に よる 表現 は 、 実 
は div タ グ 十 p タ グ の よう な 2 つの プ ブ 
ロッ ク 要 素 を 利用 せ ず 、1 つ の ブロ ッ 
ク 要 素 だ け で も 実現 で きま す 。 

背景 画像 は 、CSS3 で 複数 指定 で きる 
よう に な っ た の で 、 リ ピー ト 方 向 と 背 
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景 画像 の 始点 を 設定 し て 四辺 の み に 配 
置 さ れる よう に し ます 。 ボ ポー ダー の 指 
定 は 時 と 一 緒 で す 回 語 丁 乙 。 た だ し 、 
これ だ け で は ボー ダー の 裏 に 背景 画像 
が 配置 され ませ ん 選書 。 

背景 は ボー ダー 領域 の 内 側 に 配置 され 
ます 。 背景 の 始点 は ボー ダー の 内 側 、 
padding 領域 の 左上 で すか ら 、 ほ と ん 


どの ボー ダー 領域 に 背景 が 表示 され な 
い 状態 で す 。 そ の た め 、 背 景 の 始点 を 
ボー ダー 領域 の 左上 に し ます 。 
background-origin プロ パテ ィ の 値 を 
border-box に する と 、 ボー ダー 領域 の 
左上 が 始点 に な り ま す 民 語 。 


05 | border と 背景 の 組み 合わ せ や outline で 実現 する 節 り 肢 線 


出 HTML の 記述 (sample03.htmU 


<P class="topbox04"> ボ ー ダ ー と 透過 を 組み 合わ せる と 、 こ ん な 変化 も 
実現 で きま す 。</p> 


背景 画像 と ボー ダー の 組み 合わ せ (途中 sample03 の CSS) 


ptopbox04bt 

padding:10px: 

background:url(./img/bg04.png) repeat-x top left, 
url(./img/bg04.png) repeat-y top right, 
url(.…/img/bg04.png) repeat-x bottom left, 
url(./img/bg04.png) repeat-y top left: 
border:rgba(95.213.243,0.6) dashed 10px: 


上 |/ 市 background-clip を 使っ た 








ボー ダー 全域 に 前 景 が 表示 され な い (sample03.htmU 





CSA つこ 
ー ダ ー と 遂 遇 を 組み 合わ せる と 、 こ ん な 計 化 も 夫 現 で きま す 。 
OCN ko ro Mr LC 





背景 画像 と ボー ダー の 組み 合わ せ (sample03 の CSS) 


p-topbox04{ 

padding:10Px: 

background:url(../img/bg04.png) repeat-x top left, 
url(../img/bg04.png) repeat-y top right, 
url(./img/bg04.png) repeat-x bottom left, 
url(../img/bg04.png) repeat-y top left: 
background-origin:border-box: 
border:rgba(95,213,243.0.6) dashed 10px: 


border-box と content-box(sample03.htmU 


( 〇 ) ポ ボー ダー の 例 (sample03.htmU - | 


背景 画像 と ポー ダー に 関す る 設定 は 、 
で 紹介 し た background-origin の ほ 
か に も 、 背 景 を 配置 する 範囲 を 定義 で 
きる backqground-clip や 、box-sizing 
が あり ます 。 

語 は background-clip で 指定 する 値 
を 変え た と き の 表示 例 で す 民 諸 。 
border-box は 幅 、 高 さ の 値 を ポッ クス 
領域 まで 含ん で 適用 する 、 ブ ラウ ザ の 
互換 モー ド の よう な 算出 方 法 で す 。 
content-box は CSS2.1 の 定義 に 沿っ た } 
算出 方 法 で 、 ボ ポー ダー は 幅 や 高 さ に 含 
み ま せ ん 区 還 3。 


p-topbox04c-bt 


pr.topbox04c-pt 


} 
Ptopbox04c-c{ 


background-clip:content-box: 


まとめ [CONCLUSION] 


ウド ライ ツジ を HE は それ ほど 多 
し れ ま せん が 、 ど の よう な こと が で きる の 


に つい て は 押さ えて お く と よい で し ょ 
ボー ダー に つい て は 、CSS3 で 線 の 色 !( 
で きる よ な り ま し た が 、 そ れ ほ ど 大 
り ま せん 。 し か し 、 従 来 の ポー 








選 胡 border-box、 padding-box、 content- 
box を 指定 (sample03 の CSS) 


background-clip:border-box: 


background-clip:padding-box: 


』 mr box P | 夫 P box 是 | 
| 【 


border-box を 指定 (sample03 の CSS) 
p.topbox05-bt 
-moz-box-sizing:border-box: 
-webkit-box-sizing:border-box: 
box-sizing:border-box: 
} 
ptopbox05-ct 
-moz-box-sizing:content-box: 
-webkit-box-sizing:content-box: 
box-sizing:content-box: 


Fe 人 
で きる 表現 が 


ニッ ク の ひと つ に な る と 思い ます の 
で < 内 容 を し っ カ り と 把握 し まし ょ う 。 
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デザ イン パー ツ 


グラ デー ショ ン と 角 丸 で 作る 
7 人 リト 中 ピン レス 











55 還 還 omrewsc | 





角 丸 利 用 時 に は padding に 注意 


文字 と 角 丸 が 重なる こと 
を 防ぐ た め 、 通 常 左右 の 


padding を 、 角 丸 半径 と 
同等 か それ 以上 の 値 に し セミ ナー 実績 
ます 。 


ー タ ル 構 築 や Web ア プル 
ー ム ワー ク を 利用 し た 企 導 


こさ * 中 ロー テー ペーー 
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CS553 で は border-radius プロ パテ ィ が 
新た に 追加 され た ほか 、 background プ 
ロ パ ティ な どの 値 に グラ デー ショ ン を 指 
定 す る こと が で きる よう に な り ま し た 。 こ 
れ ら を 利用 する こと で 、 複雑 な コード で 
し か 実現 で き な か っ た 表現 が 、 シ ンプ ル 
な コー ド で 実現 可能 に な り ま す 。 


制作 ・ 文 ノ 新 谷 剛史 (株 式 会 社 セ カン ド フ ァ ク トリ ー) 


制作 の ポイ ント 

時 プラ ウザ ご と に 差 の ある 背景 グラ デー 
ショ ン の 表記 方 法 を 押さ える 

下 併 用 可能 な 新しい プロ パテ ィ を 活用 

下 角 丸 の 表 記法 を 押さ える 





[jE 非 対 応 ] [Safari ) 5 以上 ] 
[Firefex 〉3.6 以上 ] [chreome>10 以上 ] 
頂 円 の 角 丸 も 可能 


角 丸 半径 の 縦 方 向 、 横 方 向 の 半径 を それ ぞ れ 設定 する こと に よ 
り 、 痢 円 の 角 丸 を 実現 する こと も 可能 で す 。 

















border-radius04-2 


いろ いろ な グラ 





CSS3 で は 、 線 形 と 放射 状 (円 形 ) の 
グラ デー ショ ン が 設定 で きま す 回 語 。 
指定 する 方 法 は 、 ブ プラ ウザ に よっ て 若 
和 干 の 違い が あり ます の で 、 注 意 が 必要 
で す 。Firefox 系 の プラ ウザ は CSS3 の 
書式 と 同じ 書式 で す が 、 ベ ンダ ー プ レ 
フィ ックス -moz- を つけ ます 。Safari 
や Chrome 系 プラ ウザ な ど 、 ベ ンダ ー 
プレ フィ ックス が -webkit- の も の は 、 
CSS3 と 異な る 書式 で す 。 

口 刷 は 縦 方 和 へ の グラ デー ショ ン で す 。 
書式 は 異な り ま す が 、 横 方 向 の 指定 
喘 届 と 比較 する と 、 理 解 は 容易 な は ず 
で ずる 

書式 の 違い に より 、 斜 め 方 向 へ の グラ 
デー ショ ン は 大 きく 異な り ま す 。CSS3 
の 書式 で は 角度 を 指定 し ます が 、 
-webkit- で は 角度 で は な < く 「left 
top,right bottom」 の よう に 始点 と 終 
点 を 指定 し て 斜め 方 向 を 指定 し ます 
3。 





3 色 以 上 の グラ デー ショ ン 指 定 を 行う 
こと も で きま す 芝 証 。 始点 の 色 、 終 点 
の 色 、 間 の 色 と 、 始 点 か ら の 距離 を 追 
加 し ます 了 罰 。 
Firefox 系 で は 距離 の 指定 に ビク セル 
や % も 使用 で きま す が 、Safari や 
Chrome な ど -webkit- で は ピク セル で 
指定 する 距離 が 利用 で き な い た め 、% 
で 指定 する 必要 が あり ます 。 


06 | グラ デー ショ ン と 角 丸 で 作る 見 出し の バリ エー ショ ン に ーー テコ 


ンー レブル | 


中 上 縦 、 横 、 斜 め の グ ラ デ ー シ ョ ン (sample01.htmU) 


hnesr red Mnemr-gredien 


違 胡 | 縦 方 身 パ の グラデーション (sample01 の CSS) 


h3.qradient01-01{ 

background:-moz-linear-gradient(#5FD5F3.#A7B311): 
backqround:-webkit-gradient(linear,left top,left bottom,from(#5FD5F3),.to(#A7B311)): 
background:linear-gradient(#5FD5F3,#A7B311): 


上 計 | 横 方 和 グ ラ デ ー シ ョ ン (sample01 の CSS) 


h3.gradient01-02{ 

background:-moz-linear-gradient(right,#5FD5F3,#A7B311): 
backqround:-webkit-gradient(linear,right top,left top,from(#5FD5F3),.to(#A7B311)): 
background:linear-gradient(right,#5FD5F3,#A7B311): 

} 


品 較 斜め 方 向 へ の グラ デー ショ ン (sample01 の CSS) 


h3.gradient01-03{ 

background:-moz-linear-gradient(left bottom 45deg,#5FD5F3.#A7B311): 
background:-webkit-gradient(linearleft bottom,right top,from(#5FD5F3),to(#A7B311)): 
background:linear-gradient(left bottom 45deg,#5FD5F3,#A7B311): 


| 3 色 の グラ デー ショ ン (sample01.htmU) 


IISEIu 間 を まい りょう | 


[|3 色 以上 の グラ デー ショ ン を 指定 (sample01 の CSS) 


h3.gradient01-04{ 

background:-moz-linear-gradient(#EDCB46,#5FD5F3 15px,#A7B311): 
background:-webkit-gradient(linear,left top,left bottom.from(#EDCB46),color- 
stop(20%,.#5FD5F3).to(#A7B311)): 
background:linear-gradient(#EDCB46.#5FD5F3 15px,#A7B311): 

} 
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デザ イン パー ツ 


に 3 


グラ デー ショ 


グラ デー ショ ン の 指定 を 応用 する と 、 
比較 的 複雑 な 背景 も CSS53 だ け で 実現 
する こと が 可能 で す 。 

グラ デー ショ ン の 始点 か ら あ る 距離 ま 


了 に 市 グラ デー ショ ン を 組み 合わ せ て 作っ た 
2 色 の 塗り (sample03.htmU) 





linear-gradient の 応用 
(1) 











で を 同じ 色 の 指定 、 次 に 同じ 距離 で も 
う 一 度 終点 と 同じ 色 の 指定 を 行い 、 最 
後に 終点 を 指定 する と 、 始 点 か ら 中 間 
点 ま で は 同じ 色 な の で グラ デー ショ ン 
な し 、 中 間 点 か ら 2 つ 目 の 中 間 点 は グ 
ラ デ ー シ ョ ン な の だ が 距離 が 一 緒 の た 


め 表 示さ れず 、 最 後に 2 つ 目 の 中 間 点 
か ら 終 点 も 同じ 色 な の で 、 結 果 と し て 
グラ デー ショ ン の な い 2 色 の 塗り を 実 
現す る こと が で きま す 了 区 還 。 
距離 に つい て は 後 の 作業 を 考え 、% で 
指定 し て お きま し ょ う 葬 還 。 


[月 グラ デー ショ ン の 距離 は % で 指定 する (sample03) 


P.9radient02-01{ 


background:-moz-linear-gradient(left,#DDDDDD,#DDDDDD 80%,#EEEEEE 809%,#EEEEEE): 
background:-webkit-gradient(linear,left top,right top,from(#DDDDDD),color- 
stop(809%%,#DDDDDD),color-stop(809%,#EEEEEE),to(#EEEEEE)): 
background:linear-gradient(left,#DDDDDD.#DDDDDD 80%,#EEEEEE 8096,#EEEEEE): 


CS53 で は 、 背 景 画像 の 幅 と 高 さ を 指 
定 で きま す 。 この 指定 は の グラ デ 





次 に 、 こ の グラ デー ショ ン を 一 定 サ イ 
ズ で リピ ー ト させ まし ょ う 回 司 。 


軸 | グラ デー ショ ン で 作っ た 縦 じ ま 模 様 
(sample03.htmU 





linear-gradient の 応用 
(2) 











ショ ン で も 有効 で す 。 
background-size の 幅 を 5px、 高 さ を 


auto で 指定 する と 、 縦 じ ま の 模様 が 表 
現 で きま し た 区 調 。 背 景 画像 の リピ ビー 
ト に つい て は 指定 し て いな か っ た た め 、 
初期 値 の repeat が 有効 に な っ て いま す 。 


上 長 』 background-size の 幅 を 指定 する (sample03 の CSS) 


P-9radient02-02{ 


background:-moz-linear-gradient(left,#DDDDDD,#DDDDDD 809%,#EEEEEE 80%,#EEEEEE): 
background:-webkit-gradient(linear.left top,right top,from(#DDDDDD),color- 
stop(80%,#DDDDDD),color-stop(809%%,#EEEEEE),to(#EEEEEE)): 
background:linear-qradient(left,#DDDDDD,#DDDDDD 80%,#EEEEEE 809%,#EEEEEE), 


background-size:5px auto: 


放射 状 の グラ デー ショ ン も 、 基 本 的 な 
指定 方 法 は ここ まで の 例 と 一 緒 で す 。 


「 当 | 放射 杖 の グラ デー ショ ン 
(sample04.htmU) 


adial-gradient 
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色 の 複数 指定 も 可能 で す 。 

グラ デー ショ ン の 形状 が 円 か 檜 円 か 、 
グラ デー ショ ン の サイ ズ を 中 心から 近 
い 辺 や 角 に する の か 、 あ る い は 遠い 辺 


「 記 波 紋 の よう な グラ デー 


h3.gradient03{ 


や 角 に する の か な ど 、 細 か な 指定 も で 
きま す 。 

指定 を 組み 合わ せる と 、 波紋 の よう な 
表現 も 可能 で す 選 丘 娠 。 


ショ ン を 作る (sample04 の CSS) 


background:-moz-radial-gradient(bottom left,circle farthest-side,#A7B311,#5FD5F3 
2096,#81C588 23%.#5FD5F3 40%.#81C588 45%.#5FD5F3): 
background:-webkit-gradient(radiaLleft bottom,O.left bottom,240.from(#A7B311).color- 
stop(20%.#5FD5F3).color-stop(23%,.#81C588).color-stop(40%%.#5FD5F3),color- 


stop(45%.#81C588).to(#5FD5F3)): 


background:radia-gradient(bottom left,circle farthest-side,#A7B311.#5FD5F3 
2096,#81C588 2396,#5FD5F3 409%6,#81C588 45%.#5FD5F3): 


} 


nm 


ーー 一 


ーー 


ーー 和 


06 | グラ デー ショ ン と 角 丸 で 作る 見 出し の バリエ ーション に ーー 





角 丸 で 実現 する タイ トル や タブ 


これ まで 、 画 像 を 利用 し な けれ ば な ら 
な か っ た 角 丸 も 、CSS3 で は 簡単 に 実 
現 で きる よう に な り ま し た 区 証 。 


上 市 上 が 角 丸 に な っ て いる (sample04.htmU 


古い バー ジョ ン の ブラ ウザ に も 対応 さ 
せる た め に は 、 ベ ンダ ー プ レフ ィ ッ ク 
ス の ある 指定 と な い 指 定 を 併記 し ます 。 
また 、 記 述 位置 も 若干 異な る た め 、 注 
意 が 必要 で す 尼 還 。 


[ 衣 角 丸 の 指定 (sample04 の CSS) 


h3.borderRadius01{ 
border:#7D2A17 3px solid: 
-moz-border-radius-topleft:7px: 
-webkit-border-top-left-radius:7px: 
border-top-left-radius:7px: 
background:#DEB4B7 


特定 の 角 で は な く 、 す べ て の 角 を 角 丸 
に する た め に は 、border-radius また 
は これ に ベン ダー プレ フィ ックス を つ 
ける だ け で 指定 で きま す 欧 記 J。 
また 、 同 様 の 指定 で 半径 を 1 つ で は な 
く 4 つ 指定 し 、 す べ て の 角 の 半径 を 変 
更 す る こと も 可能 で す 。 左 上 か ら 時 計 
り に 右上 、 右 下 、 左 下 の 順に 指定 し 
た こと に な り ま す 加 記 。 





回 











月 】 半径 が 異な る 指定 (sample04 の CSS) 


h3.borderRadius02-2{ 
-moz-border-radius:10px 25px 40px 55Px: 
-webkit-border-radius:10px 25px 40px 55px: 
border-radius:10px 25px 40px 55px: 


臣 員 | 角 丸 の 半径 が すべ て 同じ ( 左 ) と 、 す べ て の 角 丸 の 半径 が 違う ( 右 ) (sample04.htmU) 


避 肌 | すべ て の 角 を 均等 に 丸く する (sample04 の CSS) 


h3.borderRadius02-1. 
h3.borderRadius02-2{ 
float:left: 

width:40%: 
margin-left:10pxi 
background:#DEB4B7: 
height:80px: 
padding-left:10px: 


border:#7D2A17 3px solid: 

} 

h3.borderRadius02-1{ 
-moz-border-radius:10px: 
-webkit-border-radius:10px: 
border-radius:10px: 


} 


角 丸 を 使う と き は 、 少 々 注意 が 必要 で 
す 。 区 罰 で は 、 左 上 の 角 丸 半径 を 40 
ピク セル に 指定 し て いま す 。 


世 央 文字 が 角 丸 か ら は み 出 し て し まう 
(sample04.htmU 





背景 は ボー ダー に 合わ せ て 表示 され て 
いま す が 、 文 字 は 角 丸 に 無関係 に 配置 
され る た め 、 ボ ー ダ ー と 重なっ て 表示 
され て し まい ます 。 

角 丸 を 実現 する 場合 は 、 左 右 か 上 下 、 


どちら か の padding を 半径 と 同 程度 以 


上 に 指定 する の が よさ そう で す 区 調 。 


も ちろ ん 、 半 径 以上 の 値 で あれ ば 問題 
あり ませ ん 。 


記 text-shadow の 色 指 定 で 色 を 重ね 合わ せる (sample04 の CSS) 


h3.borderRadius03{ 

clear:both: 

height:80px: 

border:#7D2A17 3px solid: 
-moz-border-radius-topleft:40px: 


-webkit-border-top-left-radius:40pxi 
border-top-left-radius:40px: 
background:url(./img/bg04.png): 

} 
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横 円 の 指定 を 行う こと も 可能 で す 。 
横 方 向 の 半径 と 縦 方 向 の 半径 を 
r20px/50px」 の よう に 指定 する と 、 縦 











長 の 本 円 の 一 部 が 指定 され た 状態 に な 
り ま す 区 記 。 

複数 の 指定 を 行う 場合 、( 横 方 向 の 半 
径 指定 ) / ( 縦 方 向 の 半径 指定 ) で 、 各 
方 向 の 指定 値 が 1 つの 場合 は すべ て の 





E 径 、2 つ の 場合 は 左上 と 右 下 、 右 上 と 
左下 の 半径 、3 つ の 場合 は 左上 、 右 上 
と 左下 、 右 下 の 半 径 、4 つ の 場合 は 左 
上 、 右 上 、 右 下 、 左 下 それ ぞ れ の 半径 
を 指定 し た の と 同じ 状態 で す 葉 罰 選 調 。 





[ 衣 | 横 方 向 の 半径 が すべ て 同じ 場合 ( 左 ) と 、 横 方 向 の 半径 が 異な る 場合 ( 右 ) (sample04.htmU 6 


| 横 方 向 の 指定 値 が 1 つ 、 縦 方 向 の 指定 値 が 4 つ (sample04 の CSS) 





時 横 方 向 の 指定 値 が 2 つ 、 縦 方 向 の 指定 値 が 4 つ (sample04 の CSS) 


h3.borderRadius04-1{ 
-moz-border-radius:20px / 20px 60px 20px 40px: 


h3.borderRadius04-2{ 

-moz-border-radius:20px 50px / 20px 60px 20px 40px: 
-webkit-border-radius:20px / 20px 60px 20px 40px: -webkit-border-radius:20px 50px / 20px 60px 20px 40px: 
border-radius:20px / 20px 60px 20px 40px: border-radius:20px 50px / 20px 60px 20px 40px: 

} } v 


角 丸 を タプ メニ ュー に 使う 


本当 角 丸 で 作っ た タプ メニ ュー (sample04.htmU 








角 丸 は タイ トル だ け で は な く 、 タ プ メ SR 、 


ポー ダー な し の 2 ブ メ ニュ ー で す 
ニュ ー を 実現 する 場合 に も 利用 可能 で 
す 昨 市 。 基 本 的 な 要領 は タイ トル の 角 
丸 と 一 緒 で す 。 
タプ の アク ティ ブ ・ 非 アク ティ ブ を 実 
現す る た め に 背景 色 を 変更 し た り 、 高 
さ を 少 し 変え る な どの 表現 を 併用 し ま 
す 臣 記 。 ま た 、 非 アク ティ ブ プ な タプ の 
下 2 つ の 角 に 角 丸 を 少し 入れ て お く と 、 
それ らし い 有 雰囲気 が 出 ます 。 





旧記 タプ の アク ティ プ ・ 非 アク ティ ブ を 区 別 す る (sample04 の CSS) 


ultabMenu01 Ii( } 
floatleft: 

height:20px: 

margin:2px 10px 0 0: padding:15px 20px 


uLtabMenu01 limenuActivet 
height:22px: 

margin-top:0: 
background:#EEE: 
-moz-border-radius:8px 8px 0 0: 

















10Ppx: 
background:#ECD2D5: 


-moz-border-radius:10px 10px 2px 2Px: -webkit-border-radius:8px 8px 0 0: 





-webkit-border-radius:10px 10px 2px 2px: border-radius:8px 8px 0 0: 


border-radius:10px 10px 2px 2px: } 
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| 還 古 ] ボー ダー を 追加 し た タプ メニ ュー (sample04.htmU) 


ポー ダー を 併用 する 場合 、 下 2 つの 角 | ea | omreeeaoe 


林 ー ダ ー あ り の タブ メニ ュー で す 
の 角 丸 は 入れ な いか 、 入 れる と し て も 
半径 1px 程 度 に と ど め た ほう が 違和感 
が な いよ うに 感じ ます 。 
代わ り に 非 ア クティ ブ プ な タプ ブ に だ け 、 
下 に も ボー ダー を 指定 する と よい で し 
ょ う 。 こ の 例 で は 背景 の グラ デー ショ 








日 胡 | ボー ダー と グラ デー ショ ン の 指定 (sample04 の CSS) 


ulLtabMenu02 


float:left 
ン も 指定 し まし た 四国 還 。 height:20px: 
タプ の 角 丸 に も 、 檜 円 形 な ど を 指定 で margin:2px 10px 0 0: padding:15px 20px 10px: 
きま す 。 background:#ECD2D5: 


border-top:#7D2A17 2px solid:border-right:#7D2A17 2px solid:border-bottom:#CCC 1px 
solid:border-left:#7D2A17 2px solid: 
-moz-border-radius:10px 10px 1px 1px: 
-webkit-border-radius:10px 10px 1px 1px: 
border-radius:10px 10px 1px 1px 

} 

ulLtabMenu02 limenuActivet 

height:23px: 

margin-top:0: 

border-bottom:0 none: 
-moz-border-radius:8px 8px 0 0: 


-webkit-border-radius:8px 8px 0 0: 
backqround:-moz-linear-gradient(#FAFAFA,#EEE): 
background:-webkit-gradient(linear.left top,left bottom,from(#FAFAFA),to(#EEE)): 
background:linear-gradient(#FAFAFA,#EEE): 





まとめ [CoNcLUSIoN] 


パテ ィ の 中 で も 、 思わ れ ま す が 、 多 用 し すぎ る と 描画 が 遅く な る プラ ウ 
5 ひと つ で す ザ も 存在 し ます 。 画像 と 比べ て デー タ 量 が 少な ぐ な る 


1 ト 9 AG: 岩 く な っ て し まわ な いよ うに 、 
ポイ ント を 絞っ て 利用 し まし ょ う 。 


二 肖 の 
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ルン を うた: は の 
スマ ー ト フォ ン サ イト 





特に スマ ー ト フォ ン サ イト で 活用 する 場 
面 の 多い 属性 セレ クタ を 使っ た テク ニッ 
ク を 紹介 し ます 。id や class は 使わ ず 、 属 
性 セレ クタ で ファ イル 名 を 利用 し て 画像 
の 位置 を スタ イリ ング し た り 、 擬 似 要素 
と 組み 合わ せ て リン ク に アイ コン を 表示 
し た りす る 方 法 を 解説 し て いき ます 。 


制作 ・ 文 佐藤 と も 子 ・ サ チコ (上 螺旋 デザ イン ) 


制作 の ポイ ント 


目 属 性 セレ クタ で ファ イル 名 を 利用 し て 





月 も 季節 の 食材 を 取り 入れ た 、 超 オシ ャ レ ! 2 画像 を 配置 
な ラン チ を 用 意 し て いま す 7 2 
ント お 訂 き な ちの を どう ぞ す ご な か ら 作 り 1 る 物 オ 時 :after 擬似 要素 で アイ コン を 表示 
RGD 時 :nth-child 擬似 クラ ス で リス ト を スタ 
ae イリ ング 


対応 プラ ウザ 


1i0S Safari 5 以 | 





Android 1.6 以上 | 


※Android は 一 部 の 処理 に 非 対 応 。 





id や class を 利用 せ ず に 画像 を 配置 奇数 の 要素 指定 で リス ト を 表現 
8 の role 偶数 ・ 奇 数 で スタ イル を 
CS53 の 属性 の 値 を セ 変更 する デザ イン も 、 
レク タ に で きる 機能 ーー E:nth-child(n) を 利用 し 

















利用 し て 、id や class 


を 使わ ず に 各 画 像 の 位 
置 を スタ イリ ング し て 
いま す 。 例 で は 画像 の 
ファ イル 名 を 利用 し て 
いま す 。 








て 特に class を 追加 し な 
く て も CSS だ け で 作れ 
ます 。 





ン ミシャ ル メ メ 
ニュ し まし た 1 凍 ド マ ト の 和 
生 バ ジル ぶっ か け 風 味 


























マ 他 に も 打 力 的 な メニ ュー が た くさ ん ! 是非 
ご 来店 く 当店 へ の Map 回 
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** 氏 る 月 の ラン チ 98 ゃ ゃ 


- =: 馬 に 、、 


rw と リル レン 』 





NR [ 軸 ] セレ クタ を 使用 し て 画像 を 配置 


3 枚 の 画像 の 配置 に 利用 し て いる セレ 
クタ を 紹介 し ます 回 還 。 

CSS3 で 新しく 策定 され た セレ クタ に 、 
E[foo^="homu"] と いう も の が あり ま 
す 。 こ れ は 、「E の 要素 の foo 属性 の 値 
が "homu" か ら 始 まる も の 」 で 指定 で 
きる の で す 。 

具体 的 な 例 と し て は 、 画 像 の ファ イル 
名 を 利用 し て スタ イリ ング する 場合 、 

img[src^=" 画像 へ の パス / フ ァイル 名 
"] で 指定 で きま す 回 調 。 個 別に id や 
class を 振ら な く て も いい の で 、id や 





っ て 内 今月 も 季節 の 食材 を 取り 入れ た 、 超 オシ ャ レ リ 
class 名 を 考え る 必要 が な い だ け で も 、 セト 


だ いぶ 楽に な り ま す 区 語 。 A・B・C ラ ンチ 、 お 好き な も の を どう ぞ ょ 


作例 の CSS で は 、 フ ァイル 名 まで を セ 
レク タ で 指定 し て 、 拡 張子 は 含ん で い 回 衣 css 


ませ ん 。 これ は 、 作 業 中 に 画像 フォ ー img【src^="img/photo1"] { 
5 マッ ト を 変更 し て も 、CSS を 修正 する Position:absolute: 

必要 が な いよ うに し て いる た めで す 。 top: 15px: 

E と [foo^="homu"] の 間 に は 、 半 角 ス 四 放 50 が 


ペー ス を 入れ ず に 詰め て お きま し ょ う 。 agDTEREUDA9 


zZ-index: 10: 


} 


[ 衣 HTML 
<div id="photos"> 
<img src="img/photo1.png" width="135" height="153" alt=" 和 三盆 で コト コト 煮 た 黒豆 を 使用 し た 、 レ トロ パン ! オリ ー プ の 実 の ビク ルス を そえ て "> 
<img src="img/photo2.png" width="124" height="141" alt=" 栗 の 渋皮 者 サン ドウ ィ ッ チ 、 キ ュ ウ リ の 漬け 物 を そえ て "> 
<img src="img/photo3.png" width="124" height="141" alt=" ト マト の 坦 焼 き 、 生 バジ ル ぶ っ か け 風 味 " ></div> 


TIPS で 0。 transform の 値 を 目視 し な が ら 設定 で きる 
今回 の サン プル で は 、 画 像 を 回 転 させ る プロ パテ ィ (-webkit-transform) を 使用 し て ー 
いま す 。 

transform は 設定 項目 が 多い た め 、scale や rotate 複数 の 値 を 設定 し た 場合 の 結果 が 
予想 し に くい こと が あり ます が 、1 の Web サ イト か ら CSS Transform ツー ル を 利用 
する と 、 目 視 し な が ら 値 を 設定 で きま す 02。 





| Style Master の CSS Transform ツー ル 


http://westciv.com/tools/transforms/ 
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CHAPTER 04 


デザ イン パー ツ 


外部 リン ク の 後ろ に ア 


ペー ジ 中 程 の 外部 リン ク を 示す アイ コ 
ン も 、 簡 単に 付け る こと が で きま す 
名 

ここ で は 先頭 か ら の ファ イル 名 の 指定 
で スタ イル を 付け まし た が 、 
E[foo*="homu"] を 使う と 、「 位 置 は 関 
係 な く 、"homu" を 含む 文字 列 を 持っ 
に 値 」 で 指定 する こと が で きま す 。 
例え ば 、「"http://" の 値 を 持つ src 属 性 
の a 要 素 」 と すれ ば 、 簡 単に 外部 リン 
ク の 指定 が で きま す 尻 。 

な お 、 こ の 指定 だ け で いい 場合 は 、 

で 解説 し た E[foo^="homu"] で も 支障 
あり ませ ん 。 


この まま で も いい の で す が 、「 ア フィ 
リエ イト の リン ク に は アイ コン を 付け 
た く な い ! 」 と いっ た 例外 を 指定 し た 
い ケ ー ス も あり ます 慌 罰 。 

この 場合 は 、E:not[s] で の 指定 も 併用 
する と 、 ア フィ リエ イト の リン ク を 対 
象 欠 に する こと が で きま す 葉 罰 。 
CMS な ど を 使用 し て いて 、 サイ ト 内 リ 
ンク が 「http://」 か ら 始 まる フル パス 
で 書か れ て いる 場合 も や 、 ド メイ ン 名 を 
フィ ル タ に し て この 書式 を 利用 する と 
いい で し ょ う 。 


TIPS 


ほか に も 属性 の 値 を セ | レ クタ に で きる 1 き 方 が あ 


ます 01s 


Elfoo$="homu"] を 利用 する と 「 拓 天子 ご と 
アイ コン を 付け る 」 な ども 簡単 に で きま すね 。 
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イコ ン を 表示 させ る 


に 六 外部 リン ク を 示す アイ コン 


* を っ フ 


ビ 記 cSs 


alhref*="http://"]:after{ 
content:url(img/window.pn9): 








マ 和栗 の 渋皮 者 サン ドウ ィ ッ チ 、 キ ュ ウ り の 損 


け 物 を そえ て 。 margin: 0 3px 0 0: 
ツ 最高 級 馬刺 し 入り ! サク ラ 納 豆 盛り 合わ ] 

せ 。 馬 諸 し は 信頼 の 牧場 か ら 入荷 1( ゅ が り 
マ ペ シ ニュ ー が : 

ニュ ー トマ ト の 志 焼 き 、 

生 バ ジル ぶっ か け 風 味 ょ 





マ 和 三 益 で コト コト 煮 た 黒豆 を 使用 し た 、 レ 
トロ バン ! オリ ー ブ の 実 の ピク ルス を そえ 
て 。 


マ 他 に も 魅力 的 な メニ ュー が た くさ ん ! 是非 
ご 来店 くだ さい 。 当店 へ の MAP 還 


お いし い 馬 刺し 牧場 ! 
pyAwww-. ア フィ リエ イト .com 





二 | 特定 の ドメイン 名 を 対象 外 に する 指定 


alhref*="http://"]:not([href*=" ア フィ リエ イ 
ト "]):after{ 





マ ュ ウ リ の 漬 = - 

け 物 を そえ て 。 content:url(img/window.pn9): 
マ 最高 級 馬 刺し 入り ! サク ラ 納 豆 盛り 合わ margin:03px00: 

せ 。 馬 刺し は 信頼 の 牧場 か ら 入 荷 !# が リ } 

ンク 先 の サン プル ) 
マ いわ ジ ニュ ー が | 

ュー トマ ト の 幸 焼 き 、 

生 バ ジル ぶっ か け 風 味 + 


マツ 和 三 益 で コト コト 煮 た 黒豆 を 使用 し た 、 レ 
トロ バン ! オリ ー ブ の 実 の ビク ルス を そえ 
て 。 


他 に も 魅力 的 な メニ ュー が た くさ ん ! 是非 
ご 来店 くだ さい 。 当店 へ の MaF 還 





お いし い 馬 刺し 牧場 ! 
htp:www. ア フィ リエ イト com 


alhref*="http://"]:after で 指定 する と 
ここ に も アイ コン が 付い て し まい ます 。 











Elfoo=*homu'] | foo 属性 の 値 が 「homu」 で ある E 要 素 
| oo 属性 の 仁 が 「homu」 で 始ま る E 要 素 

foo 属性 の 値 が 「homu」 で 終わ る E 要 素 

RTR の が "homu」 を 部 分 的 に 含む FE 要素 


、 Elfoo^="homu"] 
、 E[foo$="homu"] 
、 Elfoo*="homu"] 








兄弟 関係 の 要素 で マー ジン 


E -F で 要素 を 指定 する と 、 同 じ 親 の 
兄弟 関係 の 弟 に な る 要素 に スタ イル 付 
け を する こと が で きま す 区 還 。 
CS552 で は 、E+F と いっ た 指定 方 法 も 
可能 で 、 こ ちら も 同じ 親 の 兄弟 関係 の 
弟 に な る 要素 に スタ イル 付け を する こ 
と が で きま す 。2 つ の 違い は 、E -F の 
方 は 親 が 同じ で あれ ば 、 間 に 何 が 入っ 
て も スタ イル が 適用 され ます 。 
作例 で は section で 兄弟 関係 を 作っ て 
いま す が 、 間 に aside を 挟み 変則 的 に 
し て いま す 丁 較 。 

作例 で は 、 一 番 上 の section と 、 そ の 
後 の section で は マー ジン の 値 が 違い 
ます 加 還 。 

E+F は 、 連 続 し て いな いと 適用 され 
ませ ん 。 




















を っ) 





| 且 」E-F で 兄弟 関係 を 指定 する 





r 兄 (E) 一 


を を 時 今 月 の ラン チ 。* 





マ 和 三 区 で コト コト 熱 た 業 豆 を 使用 し た 、 レ 
トロ バン ! オリ ー ブ の 究 の ビク ルス を そ 





も 殖 力 的 な 
くだ さい 





ー が た くさ ん ! 下 非 
当店 へ の war 拓 











* ャ 配っ 月 の ラン チ あ = 


ーー 大 衣 語 、、、 


に 雪 HTML 


<Ssection> 
省略 
</section> 
<aside id="uma"> 
お いし い 馬 刺し 牧場 ! <br /> 
<a href="http://www. ア フィ リエ イト 
-com/">http://www. ア フィ リエ イト .com/</a> 
</aside> 
<Section> 
省略 
</section> 
<section> 
省略 


</section> 


区 玉 css 


section { 

margin: 0: 

} 

section - section { 
margin-top: 30Pxi 
4 


EE た まき か 北 ネ 則 :: Ir 時 3 呈 3 ノリ ルレ る と とう) 


上 じ 着 CSS だ け で 作っ た し まし ま の リス ト 


* を 空 フー ド メ ニ ュ ー 天 ゅ * 


背景 色 を 交互 に 変え る し まし ま の リス 
ト も 、 簡 単に で きま す 同 還 。 

CSS3 で 新しく 策定 され た セレ クタ に 、 
E:nth-child(n) と いう も の が あり ます 。 
これ は 、「 親 が 同じ E の 要素 の n 番 目 」 
と いう 形式 で 指定 で きる の で す 。 

n に は 1 や 2 な どの 決め 打ち 数 字 も 入 
れる こと が で きま す が 、odd (奇数 ) 
even (偶数 ) と いっ た 値 も 入れ る こと 
が で きま す 配 還 。 

これ を 利用 し て 、 し まし ま の リス ト を 
作る こと が で きま す 。 




















マ 粟 の 渋皮 者 サン ドウ ィ ッ チ 、 キ ュ ウ リ の 漬 
け 物 を そえ て 。 


く 


最高 級 馬刺 し 入り ! サク ラ 納 豆 
せ 。 馬 刺し は 信頼 の 牧場 か ら 


盛り 合 
信頼 の 牧 1 (を 
ンク 先 の サン プ 


わ 
向 ! 


カ 





に ペ シ ニュ ー が : 
ュー トマ ト の 専焼 き 、 
生 バ ジル ぷっ か け 風 味 ょ 


マツ 和 三 盆 で コト コト 煮 た 黒豆 を 使用 し た 、 レ 
トロ パン ! オリ ー ブ の 実 の ピク ルス を そえ 
て 。 


マ 他 に も 魅力 





| な メニ ュー が た くさ ん ! 是非 
い 。 当店 へ の MAF 還 








上 応 リ スト の 背景 色 を 交互 に 変え る 設定 


Ui:nth-child(odd) { 
background-color: #EFECE7: 
Mi 
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次 は 、 リ スト の 上 下 に ボー ダー を 設定 
し ます 匠 市 。 先 ほど の E:nth-child(n) 
を 使え ば で きそう な 気 が し ます が 、 数 
字 を 入れ な く て も 、EE:first-child と 
E:last-child で 指定 で きま す 屋 軸 。 最 
初 の 値 を 指定 する E:first-child の 方 は 
CSS2 か ら あ り ま し た が 、 最 後 の 値 が 
変動 する 場合 に 、CSS3 で 新しく 追加 
され た E:last-child は 便利 で す 。 


| 空 の セル に >x 印 


空 の td に x 印 を 付け て み ま す 必 軸 。 
内 容 が 空 の 要素 を スタ イリ ング で きる 
セレ クタ 、E:empty を 利用 し て 、 空 の 
セル に スタ イル を 付け る こと が で きま 
す 区 記 。 

空 の 要素 は 通常 作る こと は あり ませ ん 
が 、 テ ー ブ ル の セル の 場合 は し ば し ば 
利用 する こと が あり ます 。 td:empty で 
指定 する と 、 空 の td 要素 の スタ イリ ン 
グ を 行う こと が で きま す 。 

ここ で は 同じ 空 要素 で も th に は 設定 
し て いま せん の で 、x 印 は 付き ませ ん 。 
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最初 と 最後 の 要素 に スタ イリ ング 





[ 語 | 上下 の ボー ダー を 設定 する 


ぁ を 8 フー ド メ ニ ュ ー 江 ょ * 





マ 篤 の 渋皮 煮 サ ンド ウィ ッ チ 、 キ ュ ウ リ の 漬 
け 物 を そえ て 。 





ここ の ボー ダー で す 


ニュ ー に ! 賠 トマ ト の 票 焼 き 、 
生 バ ジル ぶっ か け 風 味 ょ 


マ 和 三 盆 で コト コト 煮 た 黒豆 を 使用 し た 、 レ 
トロ バン ! オリ ー ブ の 実 の ビク ルス を そえ 
て 。 


マツ 他 に も 鬼 力 的 な メニ ュー が た くさ ん ! 是非 
ご 来店 くだ さい 。 当店 へ の MAP 還 





月 上 下 の ボ ポー ダー を 設定 する CSS 
li:first-child { 
border-top: 3px #400000 dotted: 
} 
li:last-child { 
border-bottom: 3px #400000 dotted: 
} 


EE を が 生 : あ 





上 [上 |td:empty で 空 の セル に x 印 を 付け る 


を を 予約 受付 中 ! 江 ** 








上 胡 | 空 の td に は class や 画像 は 入っ て いな い 


<table> 

<tr><th></th><th>6 日 </th><th>13 日 </th><th>20 日 </th><th>27 日 </th></tr> 
<tr><th> 朝 の 部 </th><td></td><td> 〇 </td><td> 〇 </td><td> ハ </td></tr> 
<tr><th> 夜 の 部 </th><td> 〇 </td><td> 〇 </td><td></td><td> 人 へ </td></tr> 
</table> 


| 属性 セレ クタ を 活用 し た スマ ー ト フォ ン サ イト トド pe: 


= ャ 今月 の ラン チ 鞭 > 


ーー 


昌 |x 画 像 を セル の サイ ズ に 合わ せ て 表示 


* ッ 予約 受付 中 ! 上 8 ぁ * 


空 の セル に 表示 させ た x 画 像 は 、 セ ル 
の 角 に ぴっ た り 合 う よ う に 設定 し て い 
ます 区 玉 。 

これ は 、background-size と いう プロ 
パテ ィ を 利用 し て いま す 工 廊 。 こ こ で 
使用 し た 「background-size: 100% 
1009%%」 は 、 縦 ・ 横 に 100% に な る よう 
に 指定 し て いま す 。 で す の で 、 セ ル の 
サイ ズ の バラ ンス が 変わ っ て も 、 四 隅 
に フィ ッ ト し た 画像 が 表示 され ます 。 CSS 
ほか に も さま ざま な 値 で 指定 で きま す 
の で 、 試 し て みて くだ さい (た だ 、 残 
念 な こと に 、Android 1.6 Web プ ラウ 
ザ で は 効果 が あり ませ ん )。 } 





td:empty { 


スマ ー ト フォ ン サ イト を チェ ッ ク す る に は 


スマ ー ト フォ ン サ イト の チェ ッ ク に は 各 デ バイ ス の シミ ュ レ 
ー タ を 使い ます 。 


iPhone の 場合 


Xcode と いう 開発 パッ ケー ジ の 一 部 で ある 「iPhone シミ ュ レ 
ー タ 」 を 使用 し ます 。 残念 な が ら Mac (0S X Lion) の み 
の 対応 に な り ま す 。Lion 以前 の パー ジョ ン だ と 、 チェック で 
きる i0S5 の パー ジョ ン も 古く な っ て し まい ます 。 


iPhone シミ ュ レ ー タ (App Store) 








使用 画像 : no_data.png 


background: url(img/no_data.png) no-repeat center: 
background-size: 100% 100%: 


Android の 場合 


Windows / Mac 0S X 用 の 「Android SDK」 を 使用 し ます 
(Mac の 場合 は 「Eclipse IDE for Java Developers」 の イ 
ンス トー ル も 必要 で す )。 イ ンス トー ル の 途中 で JDK (Java 
の 開発 環境 ) の 追加 イン スト ー ル を 促す ダイ アロ グ が 出 た 場 
合 は 、 そ ちら も イン スト ー ル し て くだ さい 。 

Android の ほう は セッ ティ ング に 1 日 一 半日 ほど か か り ま す 
の で 、 ス ケ ジ ュ ー ル に 余裕 を も っ て 対応 し て くだ さい 。 


http://itunes.apple.com/jp/app/xcode/id4484570902mt=12 


Android SDK 


http://developerandroid.com/sdk/index.html 


E 芝 宣 > 還 WVONIMUEIIONII 


CSS3 で 新しく 作ら れ た セレ クタ は 非常 に 便利 で す の 
で 、 積極 的 に 利用 し て いき まし ょ う 。 ソ ー ス も 単純 に 
な り 、 管 理 が し や すく な り ま す 。 


Eclipse IDE for Java Developers 


http://www.eclipse.org/downloads/ 


CSS3 の プロ パテ ィ は Android の 卓 バ パー ジョン が 対応 
し て いな いこ と が 多い の で 、 利 用 する 前 に 簡単 に 組ん 
で 確認 し て みて くだ さい 。 
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デザ イン パー ツ 


操作 性 を 考慮 


2 アル ンク 





Index 


人 @) ニャ ンコ と ワン コ の 体 に つい て イロ 
限 イロ 画 べ て み ま し ょ う ! ? 
嗣 毎日 の ケア に つい て 大 事 な ポ イン ト ら 
本 3 講 を ま と め て み ま し た 。 > Selection1 
あな た の ベッ ト の 気 に な る 点 を 教え て 





記 軸 以外 と 知ら れ て いな い 、 ニ ャ ンコ と 


放 3 フン コ の 祭 忌 行動 に 迫る ! ! * 


い ! 
お すす め の 解 決 方 法 を お 知ら せ し ま す 
※ 必 須 項 目 で す 


周期 8 に 投与 され る お 薬 の 紹介 で 
悦 記 す 。 ノ ミ 巴 防 の お 華 な ど 。 


か わい すぎ る の で みん な に 見 せ た い 。 
当 院 の 紹介 で す 。 住 所 ・ 電 話 番号 


対生 業 時 間 な どの お 知ら せ 。 > 


W 健康 診断 を し て 欲し い 。 


ちょ っ と 体調 が 悪い みた いな の で 診 て も 
らい た い 。 


道ばた で 子 ネ コ を 拾い まし た 。 
セカ ンド オピニ オン と し て お 試し で 行っ 


て みた い の で す が ? 


Selection2 


通院 は 行い た いで すか ? 楽 必須 項目 で す 


② G@⑥ 


NO! 


よく 見 る イン ター フェ イス を CSS で 実現 


CSS3 の 擬似 要 
加 放置 ニャ ンコ と ワン コ の 体 に つい て イロ 

素 を 駆使 する こ 全員 べ て み ま し ょ う > 
と で 、 右 の よう 
、 一 ゝ 請 毎日 の ケア に つい て 大 事 な ポ イン ト 
な デザ イン も を まとめ て み ま し た 。 久 
HTML 要素 を 飾 

0 = 以外 と 知ら れ て いな い 、 ニ ャ ンコ と 
リ だ け の た め に ワン コ の 失 尽 行動 に 飼 る ! ! > 
増やす こと な く 、 
Sb 周期 的 に 投写 さ れる お 薬 の 紹介 で 
ジン で の す 。 ノ ミ 予 防 の お 業 な ど 。 
ド で 表現 で きま 
す 。 還 き 院 の 紹介 で す 。 住所 ・ 電 話 番号 ・ 、 


営業 時 間 な どの お 知ら せ 。 
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どちら で も いい 


し た 
ILzg の 7 人 ここ レン / 





スマ ー ト フォ ン の サイ ト デ ザ イン で よく 見 
か ける UI の コー ディ ング を 、CSS3 を ふ 
ん だ ん に 使用 し て 、 シ ンプ ル な ソー スコ 
ー ド で 実装 し まし た 。 タ ッ チ の し や すさ 
に も 配慮 し た 設定 に な っ て いま す 。 


制作 ・ 文 / 佐 藤 と も 子 ・ サ チコ (螺旋 デザ イン ) 


制作 の ポイ ント 


時 リン ク 範 囲 を 広く 設定 

下 擬 似 要素 を 利用 し て リス ト 部 分 に アイ 
コン を 表示 

時 ラジ オ ボ タ ン の ON / OFF を label 要 
素 で 表現 


[ios safari ) 5 以上 | 





[Andreid ) 1.6 以上 ] 


※Android は 一 部 の 処理 に 非 対 応 。 


label 要素 に onclick 属性 を 入れ る 


i0S で は label を 押し て も 反応 し ませ ん 。 こ こ で は 、label 要 素 
に onclick 属性 を 入れ る こと で 対応 し て いま す 。 


Selection2 
通院 は 行い た いで すか ? ※※ 必 須 項 目 で す 。 
どちら で も いい 


OK! NO! 





リン ク 範 囲 の 広い 目 


スマ ー ト フォ ン サ イト で よく 見 か ける 
タイ プ の 、 目 次 デザ イン の コー ディ ン 
グ 手 法 を 解説 し ます 。 

[ 計 の よう な 構成 で 組み ます 。 


0D8 | 操作 性 を 考慮 し た スマ ー ト フォ ン 向 け の パー* 





次 の デザ イン 


唱 目 | 目次 の 構成 





コ と ワン コ の 体 に つい て イロ 。 





イロ 調べ て み ま し ょ う ! 








毎日 の ケア に つい て 大 事 な ポ イン ト 、 
を まとめ て み ま し た 。 


の 4 以外 と 知ら れ て いな い 、 ニ ャ ンコ と 、 
ワン コ の 禁忌 行動 に 迫る ! 


周期 的 に 投与 され る お 薬 の 紹介 で > 
す 。 ノ ミ 予 防 の お 薬 な ど 。 


つき 院 の 紹介 で す 。 住所 ・ 電 話 番号 ・ 
営業 時 間 な どの お 知ら せ 。 








まず は 、 ベ ー ス の ul に 角 丸 を 指定 し ま 
す 恒 。 

行 全体 を リン ク 範 囲 に し た い の で 、a 
タグ を ブロ ッ ク に し ます 攻 廊 。 

スマ ー ト フォ ン で は リン ク 範 囲 が 大 き 
い ほ ど 操 作 性 が 上 が る の で 、 デ ザイ ン 
的 に 不 自然 で は な い 場 合 は で きる だ け 
大 きく し て いき まし ょ う 。 


当 | 角 丸 の 指定 


ul#theme1{ 
background-color:#FFF: 
border: 1px solid #B7BCBE: 
border-radius: 10px: 
font-size: 14px: 

line-height: 1.2: 

} 


時 リンク 範 囲 を 設定 


#theme1 liat 

display:block: 

padding: 10px 20px 10px 48pxi: 
text-decoration: none: 

Ccolor: #000: 

Position:relative: 


} 


a タ グ の :after を 利用 し て 、 矢 印 の ア 
イコ ン を つけ ます 区 還 。 

各 ア イコ ン の 位置 調整 は 、 親 の a タ グ 
か ら 絶 対 配置 オマ ー ジ ン 調 整 で 縦 位置 
に 中 央 に な る よう に し て いま す 馬 叶 。 








と が な い 方 あい の で は な 
- 非常 に 便利 な の で 、 ス 
サイ ト な ど IE6・7 が 対応 六 
まれ て いな い 場 合 は 是非 使っ て みて < だ 
きい 。 







還 矢 還 の アイ コン を つけ る 


before after 






ニャ ンコ と ワン コ の 体 に つい て イロ 」 
イロ 調べ て み ま し ょ う ! 


毎日 の ケア に つい て 大 事 な ポ イン ト ぅ 
を まとめ て み ま し た 。 


双 以外 と 知ら れ て いな い 、 ニ ャ ンコ と 、 
ワン コ の 禁 豆 行動 に 飼 る ! ! 


周期 的 に 投写 され る お 薬 の 紹介 で 、 
す 。 ノ ミ 予 防 の お 薬 な ど 。 


の 当 院 の 紹介 で す 。 住 所 ・ 電話 番号 ・ 、 
営業 時 間 な どの お 知ら せ 。 


|:after の 設定 


#theme1 lia:after{ 

content: ur(img/icon_next.png):/*『 ア イコ 
画像 ソ 

position: absolute: 

top: 50%: 

right: 0: 

margin-toP:-6PX: 

margin-right: 10px: 

} 
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a タ グ の :before を 利用 し て 、 青い アイ 
コン の 位置 指定 を し ます 区 還 。 

青い アイ コン は グラ デー ショ ン と 角 丸 
プロ バテ ィ で スタ イリ ング し た いと こ 
ろ で す が 、Android の プラ ウザ が か 対応 
し て いな い バ パー ジョ ン が 多い の で 今回 
は 見 送り まし た 。 

青い アイ コン の 画像 の 個別 指定 は 、 
:nth-child() を 利用 し て 設定 し て いま す 
【 屋 。 上 か ら 1 て 5 で 番号 を 振っ て 指 
定 し て いま す 避 軸 。 class・id な ど を 追 
加 せ ず に スタ イリ ング で きる の で 、 便 
利 で す 区 主 。 

以上 で 完成 で す 。 























タッ チ し や すい ラ 


[ 滞 | before の 設定 [ 受 】 アイ コン 画像 の 設定 


#theme1 lia:before { #theme1 li:nth-child(1) a:before { 


content: content: url(img/icon_megane.pnd): 
Dosition: absolute: } 

top: 5096: 

left: 0: 


margin-top:-16px: 
margin-left: 10px: 
width: 32px: 
height: 32px: 

} 


叶 ] 1 ~ 5 の 番号 で 画像 指定 され た 


青い アイ コン の style 指 定 に 8 シー 

使用 する セレ クタ ide 

#theme1 li:nth-child[1] a:before W ニャ ンコ と ワン コ の 体 に つい て イロ 、 
同 イロ 調べ て み ま し ょ う ! 


毎日 の ケア に つい て 大 事 な ポ イン ト 、 


#theme1 li:nth-child[2] a:before を まとめ て み ま し た 。 


#theme1 li:nth-childl3) arbefore ES ー ト ジン コ と な 
heme1 linth-childl4] a:before お] 


当 院 の 紹介 で す 。 住 所 ・ 電 話 番号 ・ 


角 heme1 Ui:nth-child[5] a:before 営業 時 間 な どの お 知ら せ 。 ? 


講 目 次 の HTML 


<ulid="theme1"> 

<li><a href="#"> ニ ャ ンコ と ワン コ の 体 に つい て イロ イロ 調べ て み ま し ょ う ! </a></ll> 
<li><a href=" が > 毎 日 の ケア に つい て 大 事 な ポ イン ト を まとめ て み ま し た 。</a></li> 

> 以外 と 知ら れ て いな い 、 ニ ャ ンコ と ワン コ の 禁忌 行動 に 迫る ! ! </a></li> 
#"> 周 期 的 に 投与 され る お 薬 の 紹介 で す 。 ノ ミ 予 防 の お 薬 な ど 。</a></li> 
<li><a href="#"> 当 院 の 紹介 で す 。 住所 ・ 電 話 番号 ・ 営 業 時 間 な どの お 知ら せ 。</a></ll> 
<7u> 








<li><a href= 





押し や すい ラジ オ ボ タ ン の ベー ス を 作 
成 し ます 。 届 還 の よう な 構成 で 組み ま 
す 。 

基本 的 な 枠組 み は 先 ほど の 目次 デザ イ 
ン と 同様 で 、』 タ グ と label タ グ を 入れ 
替え た よう な 組み 方 に な っ て いま す 。 
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[ 誠 ラジ オォ ボタ ン を 含む ペー ジ の 構成 


ul 
U 




















label 
| な s いす ぎる の で みん な に 見 せ た い 。 





し て 欲し い 。 
input 


ちょ っ と 体調 が 悪い みた いな の で 診 て も 
らい た い 。 


道ばた で 子 ネ コ を 拾い まし た 。 


セカ ンド オピニ オン と し て お 試し で 行っ 
て みた い の で す が ? 











ODN 
『 二 


08 | 操作 性 を 考慮 し た スマ ー ト フォ ン 向 け の パー ツ ッ 








作 作 述 し て いま す 回 語 。 る 「E+F」( こ れ は CSS2 で す ) を 組 
ie これ は 、CS53 の ラジ オ ボ タ ン の チェ み 合 わせ て 表現 し て いま す 区 廊 。 
ラジ オ ボ タ ン が チェ ッ ク さ れ た ら 、 ッ ク さ れ た 状態 を 表す セレ クタ の ラジ オ ボ タ ン 自 体 は display: none で 表 
labelt の スタ イル を 変更 する よう に 記 「E:checked」 と 、 直後 の 要素 を 指定 す 示 を 消し て いま す 回 語 。 


チェ ッ ク マ ー ク の 表示 ラジ オ ボ タ ン の チェ ッ ク 時 に 表示 を 変更 する 設定 


#theme3 li input[type="radio"]:checked + label{ 
background: #1466B5: 
Color: #FFF: 









check 時 ーーーーーーーー 
い W 健康 診断 を し て 欲し い 。 





font-weight: boldi 


J 3 。 box-shadow: 5px 5px 3px rgba(0,0,0,0.3) inset: 
ー 通常 時 ー } 
道ばた で 子 ネ コ を 拾い まし た 。 


PT 革 ] ラジ オ ボ タ ン を 非 表示 に する 設定 
_ #theme2 li input[type="radio"], #theme3 li input[type="radio"] { 
display: none: 


7/ 応 する 状態 に し ます 加 還 。 Android で は ラジ オ ボ タ ン は 反応 する 
ラジ オ ポ ボタ ン 側 の id と label の for の 値 た め 、 ま ぎら わし い の で 注意 し まし ょ 
PC 用 の サイ ト 制 作 で は よく 使う 、 を 揃え れ ば いい の で す が 民 調 、 こ の ま 須 ぁ 
labetl で マー キン グ さ れ た 人 箇所 を クリ まで は i0S の Safari だ け 反 応 し ませ ん 。 
ッ ク す る と 対応 する ラジ オ ボ タ ン が 反 PC 用 の プラ ウザ (Safari も 含む ) と 





指定 し た 範囲 を クリ ッ ク す る と ラジ オ ボ タ ン が 反応 する 


@ が か わい すぎ る の で みん な に 見 せ た い 。 


sample.html 
<input type="radio" name="s1" id="s1_1" /><label for="s1_1"> か わい すぎ る の で みん な に 見 せ た い 。</label> 





仙人 ます 工 還 。 の onclick を 付け て お く こ と で 対応 す 
( 〇 ) 
プレ ー ン な 状態 の ラジ オ ボ タ ン 十 。 る と いい で し ょ う 。 


これ は label に 空 の onclick を つけ る と label で も 起こ る 現象 な の で 、 i05 用 の 
i0S の Safari で も 反応 する よう に な り フォ ー ム を 作成 する 場合 は 、label に 空 


空 の onclick を 追加 
1] <input type="radio" name="s1" id="s1_1" /><label for="s1_1" onclick=""> っ か わい すぎ る の で みん な に 見 せ た い 。</labe> 
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CHAPTER 04 


デザ イン パー ツ 





押し や すい ラジ オ ボ タ ン の 変形 版 で す 。 





ラジ オ ボ タ ン を 横 に 並べ て スマ ー ト フォ ン ら し さ を 


中 計 | 棋 並び に し た ラジ オ ボ タ ン 











[ 語 の よう な 構成 で 組み ます 。 先ほど ul 
の ラジ オ ボ タ ン の デザ イン を 、 横 並び どちら で も いい 
に し た 状態 で す 。 
この デザ イン も 非常 に スマ ー ト フォ ン 
らし さ が 出 て いる の で 、 選 択 肢 の 文言 
が 短い と き 適し て いま す 。 
され た 要素 の 子 要素 は 自動 的 に 横並び 上 妥 u を box 指 定 
に な り 、float の 利用 と 違っ て 高 さ も 揃 ul 才 heme3 { 
の 縦 並び の ラジ オ ボ タ ン か ら 、 横 に う の で 非常 に 便利 で す 。 margin: 0: 


配置 し た い l 要 素 の 親 の ul で box 表 示 
を する よう に 指定 し て いま す 罰 還 。 
rdisplay: -webkit-box」 で マー キン グ 


この 場合 は ul に box 指 定 し て いる の で 、 
その 子 要素 の 1 が 横並び に な り ま す 
3。 


display: -webkit-box: 
] 


旧記 HTML 
<ul id="theme3"> 
<li><input type="radio" name="s2" id="s2_1" /><label for="s2_1" onclick="">0KI</label></li> 
<li><input type="radio" name="s2" id="s2_2" /><label for="s2_2" onclick="">NO!</labe></l> 
<li><input type="radio" name="s2" id="s2_3" /><label for="s2_3" onclick=""> ど ちら で も いい </labe></l> 
<7u> 


日 ラジ オ ボ タ ン が 押さ れ た 状態 


チェ ッ ク さ れ た label は 要素 の 内 側 に 
影 が 入る よう に し 、 ボ タン が 押さ れ た 
感 を 出す よう に し て いま す 罰 還 。 
これ は CS5S53 の プロ パテ ィ で ある 
rbox-shadow」 を 利用 し て いま す 。 
ボッ クス 要素 の 外側 だ け で は な く 、 内 
側 に も 入れ る こと が で きま す 中 還 。 


0 る 


」。。box-shadow の 設定 
角 丸 の CSS3 プロ バテ ィ (border-radius)、 シ ャ ドウ を つけ る プロ パテ ィ (box-shadow) 
_ は 、Android 1.6 で は 対応 し て いま せん 。 
今回 の サン プル は 、Android 1.6 で は 上 記 の 効果 が 表示 され ませ ん が 、 ア クセ シビ リティ 
は 確保 され て いる た め 、 特 に 対策 は し て いま せん (Android 1.6 で は 、 該 当 箇所 は 直角 ・ 


#theme3 li input[type="radio"]:checked + label 【 
background: #1466B5: 
color: #FFF: 


font-weight: bold: 8 影 な 時 社 は 3 3 は 2 - 
box-shadow: 5px 5px 3px rgba(0.0.0.0.3) inset: 提 4 朱 2 の 表現 も ANOE194 が ちの 対応 人 人 六 寺 あの 9913 人 32: 衝 
だ さい 。 


} 
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i0S5 と Android 05 の バー ジョ ン 対 応 


スマ ー ト フォ ント 専用 サイ ト の 場合 、PC サ イト ほど 古い バー ジ 
ョ ン の ブラ ウザ 対策 に 苦労 する こと は 少な いで し ょ う 。 

i05 は 3 年 前 の 機種 で ある iPhone 3GS (2009 年 発売 ) で も 、 最 
新 の i0S5 に バー ジョ ン ア ッ プ で きる た め 、i053 以 下 の 環境 で 
閲覧 し て いる ユー ザー は 皆無 で は あり ませ ん が 、 少 数 で ある と 
いえ ます 。 

Android は 発売 時 の 05 か ら ア ッ プ デー ト で き な い 機種 が ある 
た め 、 ユ ー ザ ー の 閲覧 環境 に は 最新 の Android 05 と 古い バー ジ 
ョ ン の Android 05 が 混在 し て いる こと に な り ま す (Google が 
新しい 0S を 発表 し て も 、 端 末 の メー カー が 対応 し な いと アッ 
プ デ ー ト で きま せん )。 

i0S は 制作 時 の 最新 版 に 対応 する よう に 制作 すれ ば よい ケー ス 
も 多い で す が 、Android 0S は 制作 時 に 最も シェ ア の 多い バー ジ 
ョ ン の 調査 を し て お く と いい で し ょ う 。 


試し て ほし い グ ラ デ ー シ ョ ン と 角 丸 


グラ デー ショ ン (-webkit-radia-gradient) と 角 丸 (border- 
radius) の プロ パテ ィ は 、Android 05 の プラ ウザ で は まだ た 対応 
し な いた め 、 こ の サン プル で は グラ デー ショ ン を 画像 を 使っ て 
表現 し まし た 。 

今後 Android ブラ ウザ で も 対応 が 進ん だ 場合 や 、 ユ ー ザ ー の 閲 
覧 環境 を iPhone (Mobile Safari) に 限定 で きる 案件 で は 、 グ 
ラ デ ー シ ョ ン や 角 丸 を 画像 で は な く CSS3 で 実装 し て みて くだ 
さい 。 

最近 の スマ ー ト フォ ン は 画面 解像度 が 非常 に 高い た め 、 画 像 を 
利用 し て いる 場合 は どう し て も ぼや けた 印象 に な り が ち で す が 、 
CSS を 使っ て 表現 し た グラ デー ショ ン や 角 丸 は 、 高 解像度 の ス 
マー ト フ ォ ン で も 美しく 表示 され ます 。 ま た 、 拡 大 ・ 縮 小 し て 
表示 し て も 画像 の 場合 と 違っ て ドッ ト が 目立ち ませ ん 。 


まとめ [coNcLusloN] 


スマ ー ト フォ ン サ イト の デザ イン ・ コ ー デ ィング を す 


置き な 


る と き は 、 指 で タッ チ し て 操作 する こと を 
が ら 、 ポ ボタ ン 系 を 心持ち 大 きめ に 作っ て いく と 使い や 
すい サイ ト に な り ま す 。 


D8 | 操作 性 を 考慮 し た スマ ー ト フォ ン 向 け の パーツ 





IiOS シ ミュ レー タ も i05S 4 以下 に は 対応 し て いな い 


ーー 








ジョ ン も チェ ッ ク で き 
9 年 発売 ) も 最新 の (0 


. CSS で 描画 し た 方 は ドッ ト が 目立た な い 
2359 


wisoftBank 会 @ 82% ak 





radius sample 








PC 用 の サイ ト と いろ いろ 勝手 が 違い 難し いと ころ も 
あり ます が 、 ロ ー ル オー バー が 存在 し な いた め 、 そ の 
点 は 手間 が 少な く な る と いえ ます 。 
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デザ イン パー ツ 





CS53 の グラ デー ショ ン 機 能 を 使 


シル を Am レー ピス ネコ [コピ ルー 


蛍光 マー カー 風 の 文 字 装飾 


This is title 


文字 列 に 細 発 補語 カ 語 を 3| い た よう な 


見 映え を 加え た い 


Lorem Ipsurm is simply dummy text 
of the printing and typesetting 
industry. Lorem Ipsum has been the 
industry's standard dummy text 
ever since the 1500s. when an 
unknown printer took a galley of 
type and scrambled it to make a 
type specimen book. It has survived 
not only five centuries. but also the 
leap into electronic typesetting 


s read more 


CSS3 の グラ 


デー ショ ン 機 


能 を 使い 、 色 


の 変化 を あえ 
て させ な いこ 
Ss 
ング 効果 を 実 
現し ます 。 
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マー キ 





示さ れ ま せ 


Lorem Ipsum is simply dummy text 
of the printing and typesetting 
industry. Lorem Ipsum has been the 
Industry's standard durmmy_text 
ever since the 1500s. when an 
unknown printer took a galley of 
type and scrambled it to make a 
type specimen book. t has survived 
not only five centuries. but also the 
leap into electronic typesettino. 


read more 


メチ に 議 議 議 議 量 を SI いた よう な 
見 映え を 加え た い 


Lorem Ipsum is simply dummy text 
of the printing and typesetting 
industry. Lorem Ipsum has been the 
industry's standard dummy text 
ever since the 15005s, when an 
unknown printer took a galley of 


type and scrambled it to make a 
type specimen book. It has survived 
not only five centunies, but also the 
leap into electronic typesettind, 






文字 列 に 蛍光 ペン を 引い た よう な マー カ 
ー 効 果 を 施し た いと き 、 従 来 は 文字 列 の 
背景 に 色 を 付け た り 、 背 景 画像 を 使い ま 
し た が 、 ここ で は CS53 の グラ デー ショ ン 
機能 を 使う 方 法 を 紹介 し ます 。 マ ウス で 
選択 し た 部 分 だ け マ ー キ ング する こと も 
で きま す 。 


制作 ・ 文 山本 圭 助 
(株 式 会 社 ラ ナ デ ザ イン アソ シ エ イ ツ ) 


制作 の ポイ ント 


時 従来 の マー カー 表現 
時 CSS3 で の マー カー 表現 
帳 選 択 し た テキ スト へ の マー カー 表現 


eeZ22 が 0 ココ 


[E 腕 2 PE 





※IE7 以上 で 表示 は 確保 。 


マウ ス で 選択 し た 部 分 に マー キン グ を 施す 


::selection 擬 
似 要素 を 使っ 
SA 補 
指定 し た 部 分 
に ジン ダ ラク 
ティ ブ な マー 
キン グ を 行い 
ます 。 


この ブロ ッ 


8 が 付 計 上 


Lorem Ipsum is simply dummy text 

of the printing and typesetting 

industry. Lorem Ipsum has been the 6 
industry's standard dummy text G 
ever since the 1500s, when an 

unknown printer took a galley Of 

type and scrembled 計 to make a 

type specimen book. It has survived 

not only five centuries, but also the 

leap into electronic typesettin, 


T て * 


AP ドド ギ 








? | グラ デー ショ ン 機 能 を 使っ た 








品 光 マー カー 風 の 文字 装飾 





従来 の マー カー 表現 


文字 列 に 蛍 光 マ ー カ ー を 引い た よう な 
見 映え を 加え た い 場 合 、 文 字 列 の 背景 
色 を 変更 し ます 操 同 本 。 


も う ひ と 工夫 し た い 場 合 は 、 背 景 画像 
を 使う 方 法 が あり ます 隊 呈 区 買 。 

た だ し 、 こ の 方 法 は 行 の 折り 返し を 伴 
う 場所 で は 、IE7 以下 で は 正しく 表示 
され ませ ん 陳 。 


口 市 | 従来 の 方 法 
/ html 


<P> 
文字 列 に <em> 蛍 光 マ ー カ ー</em> を 引い た よう な 見 映え を 加え た い 
</p> 
// css 
em{ 
background-color: #fadd4b: 
} 


口 友 | 従来 の 方 法 に よる マー カー 表現 


文字 列 に を 引い た よう な 
見 映え を 加え た い 


所 | 背景 画像 を 使う 方 法 
// html 


<P> 
<strong> こ の マー カー は IE7 以 下 で は 正しく 表示 され ませ ん 。</strong> 
</p> 
// css 
stronq { 
background: url(../img/marker-bg.png) repeat-x 0 4Dx: 
} 


号 | 背景 画像 を 使っ た マー カー 表現 (Firefox、Chrome) 


大 | 背景 画像 を 使っ た マー カー 表現 (IE7、IE6) 


示さ れ ま せん 。 
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CHAPTER 04 





S3 で の マー カー 表現 1 





の ) 民 記 CSS3 の グラ デー ショ ン 機 能 を 使う 方 法 





// html 
CSS3 の グラ デー ショ ン 機 能 を 使え ば 、 <P> 
画像 を 指定 し た の と 同様 の 表示 を 行う 文字 列 に <em> 蛍 光 マ ー カ ー</em> を 引い た よう な 見 映え を 加え た い 
こと が で きま す 区 還 。 区 
色 の 境目 に 2 色 を 指定 する こと で 、 あ 2 
えて グラ デー ショ ン さ せ ず 、 色 を 切り 半 _- ーーー 
旨 // グラ デー ショ ン 非 対応 プラ ウザ 用 
替え ます 区 胃 。 background-color: #fadd4b: 
// Firefox 用 
background: -moz-linear-gradient(top, 
#fff, 
#fff 50%6, 
#fadd4b 509%, 
#fadd4b 75%, 
#fff 


): 
// Chrome. Safari 用 
background: -webkit-gradient(linear, left top, left bottom, 
from(#ff)。 
color-stop(0.5, #ff)。 
color-stop(0.5, 電 add4b), 
color-stop(0.75, #fadd4b), 
to(#fff) 


区 衣 プラ ウザ ご と の グラ デー ショ ン 指 定 


-moz- の 指定 
ee AM -moz-linear-gradientltop, 
#fff 
#fff 50%, 
#fadd4b 509, 
#fadd4b 7596, 





se #ff 
量 ]: 
-webkit- の 指定 
上 background: -webkit-gradientllinear, left top, left bottom, 
from#ff, 


color-stop[0.5, #f, 
color-stop[0.5, #fadd4b), 
color-stop[0.75, #fadd4b], 
to[#f]: 
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ョ ン 機 能 を 使っ た 蛍光 マー カー 風 の 文 字 装飾 











MEM0 
Chrome と Safari は 指定 の 方 法 が 2 種類 あり ます 。 
Firefox 


-moz-linear-gradient( 方 向 , 開始 色 , 中 間 色 位置 (% ), 終了 色 ): 
※ 中 間 色 は 省略 可能 。 位 置 は % で 指定 する 。 





Chrome / Safari 
-webkit-gradient(linear, 開始 位置 , 終了 位置 , from( 開 始 色 ), color-stop( 位 置 , 中 間 色 ), to( 終了 色 )): 
※ 中 間 色 は 省略 可能 。 位置 は % か 0 1 の 小数 値 で 指定 する 。 


-webkit-linear-gradient( 方 向 , 開始 色 , 中 間 色 位置 (% ), 終了 色 ): 
※ 中 間 色 は 省略 可能 。 位 置 は % で 指定 する 。 











選択 し た テキ スト へ の 装飾 


人 [| ::selection 擬似 要素 を 使う 方 法 
員 


// html 
jiselection 擬似 要素 を 使う こと で 、 選 <p> 
択 し た 文字 列 の 色 を 変更 する こと が 可 テキ スト を 選択 する と マー カー 色 が 付き ます 。 
能 で す 区 還 。 36e 
// css 
::selection { 
background-color: #fadd4b: 
} 
:-moz-selection { // Firefox 用 
background-color: #fadd4b, 


テー ショ ン 機 能 で あえ て 2 ン ト リン ク テ キ スト や 、 打 ち 消 し 線 を 使用 する del 要素 の 
育 景 の 任意 の 位置 に ライ が て テキ スト な ども 、 グ ラ デ ー シ ョ ン 機 能 を 使う こと で 、 
表現 力 を 上 げ る こと が 可能 に な り ま す 。 
いろ いろ な 場所 で 応用 し て みて くだ さい 。 
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目的 別 索 引 





に 3 ヨロ 


| 


ナビ ゲー ショ ン の 作成 


































































































画像 に アニ メー ショ ン を 設定 する 152.171 カー ソル の 置か れ た 要素 の 色 を 変え る 110.122 
画像 に ロッ プシ ャ ドウ を つけ る _ 206 コン テン ツ を スラ イド させ る 196 
画像 に フレ ー ム を 付け る 158 タプ ナビ ゲー ショ ン を 実装 する ーー % 
画像 の 上 に テキ スト を 配置 する _ 184 バン くず 型 の フロ ー を つく る ーー 102 
画像 に 影 を つけ る - 206 プル ダウ ン メ ニュ ー を つく る 88, 116 
画像 を 重ね て 複雑 な 背景 を つく る ーー 196 多 型 プル ダウ ン メニ ュー を つく る 116 
画像 を 傾け る 72 メニ ュー の 位置 を 固定 する - 44 
テク スチ ャ を 重ね る 還 79 - 
透過 画像 を 使っ て 複雑 な デザ イン を 表現 する ーー プロ グレ ッ シ プ ・ エ ン ハ ンス メン ト の 手法 
ファ イル 名 を 利 ) し て 画像 を 配置 する 244. css3-mediaqueries.js を 適用 する 35 
) 53 72. 168 Css3 PIE を 適用 す る ー 攻 53. 66, 166, 210 


マス ク 効 果 を か ける 

































































































































































filter を 設定 する 124. 215 
eetW ーー 
HSLA で 色 を 指定 する 218 html5js を 使用 する 117.179. 185, 229 
カス タム URL スキ ー ム を つく る ーー 144 計 leGHiWizF]g を 便 する 50.71. 101. 227 
テキ スト フィ ー ル ド を クリ ア す る 。。。 128 
ッッ コ ーー PF iPhone の よう な フォ ー ム を つく る 128 
1 行 目 だ け を 装飾 する 190 カラ ム の 設定 を 行う 還 38,84 
DropCaps を っ くる pi 本 ーー _190.202 グリ ッ ド レイ アウ ト を つく る _- 56 
Web フ ォ ン ト を 使う 。。 21. 76, 161. 174 野 線 を ひく ーー 234 
単語 の 折り 返し を 設定 する _ - 5s9 写真 を 飾る = ーー 184 
文字 に 影 を つけ る っ 大 ー ー 190 スマ ー ト フォ ン に 向い た サイ ト を つく る 244, 250 
文字 に ベベ ル と エン ボス を つけ る 190 絶対 配置 で レイ アウ ト する ーー 48 
文字 に マー キン グ す る 。。 222.256. 沈 頭 文 字 を 拡大 し て 回 り 込 ませ する _- 202 
文字 を 傾け る - 76. 195 段 組み の レイ アウ ト を つく る 82 
ーー 本 ツリ ー 図 を つく る 228 
角 を 丸く する 96, 212. 238 入力 フォ ー ム を つく る ー 110.128 
節 り 野 線 を つく る _- 234 フォ ト ギャ ラリ ー を つく る ー 152 
グラ デー ショ ン を 設定 する 212. 238 ポッ クス レイ アウ ト を つく る 36 
ボタ ン に 光沢 を つけ る ー - 119 マル チ デ パイ ス に 対応 する 30.56 
ポタ ン の 内 側 に ライ ン を 入れ る 。 213 リキ ッ ドレ イア ウト を っ つく る 。 48 
グラ デー ショ ン の ボタ ン を っ つく る - 126.212 リス ト を つく る ーー 144.244 
ラジ オ ボ ポタ ン を つく る 250 レス ポン シブ Web デザイン _ 30,56 
ロー ルオ ー バ パー させ る 44.122 - 
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background-origin プロパ ティ 236 
:after 擬似 クラ ス 79, 251 BBeKBrOhOESIzGZ ロ 7% デ 199, 249 
:after 擬似 要素 _- 188, 200 background: gradient 敵 258 
:before 擬似 クラ ス 221. 251 background: linear-gradient 230, 258 
:before 擬似 要素 上 200 background プ ロ パ ティ - 198, 230. 258 
.checked 擬似 クラ ス _19 border-image-repeat プロ パティ 161 
Hsled 擬似 クラ ス 6 本 19 border-image-slice: fil ー 164 
.empty 擬似 クラ ス 18, 218, 226, 248 border-image-slice プロ バ パティ 160 
:enabled 擬似 クラ ス _ - 19 border-image=source プ ロ パ ティ 159 
diehIG 擬似 クラ ス 18, 91, 138, 231. 248 border-image-width プロ パテ ィ 凍 160 
.first-letter 擬似 要素 182, 194 BISIEBa プロ パテ ィ 68, 159 
1 iret-line 擬似 要素 - 195 DBE プロ バテ ィ 5 24, 53, 58, 99, 120 
FSS 擬似 クラ ス 唐 二 18 Bshadainseb 呈 汽 209 
hover 擬似 クラ ス 間 ーー 213, 225 box-shadow プロ パテ ィ 2 99. 113. 119, 154, 162, 208, 213 
:last-child 擬似 クラ ス _- 18.91.120. 148.248 dd border-box ー - 420 
:last-of-type 擬似 クラ ス _ 5 18 box-sizing プロ バテ ィ 237 
19 


:not(s) 擬似 クラ ス 
















































































nr an 2 2 25 
:nth-child(n) 擬似 タラス 18.247 class 属性 14 
Jnth-last-child(n) 擬似 クラ ス 18 color: hsla 219 
:nth-last-of-type(n) 擬似 クラ ス 18 Co Umn-count プ ロ パ ティ _ ー に 計 25, 84 
nth-of-typen) 擬似 クラ ス 18 column-gap プ ロ パテ ィ 25, 86 
:only-child 擬似 クラ ス - 本 18 IIDSNUUSSGGIBPZ2EI7208 丘 25.85 
_:only-of-type 擬似 クラ ス 18 column-rule-style プロ パテ ィ ご 当 25. 85 
:root 擬似 ラス と 18 BBUNRIhRUNeSNIGt プロ バテ ィ 本 25.85 
:selection 擬似 要素 259 co Umn-rule プ ロ パ ティ ーー 25. 85 
:target 擬 似 ク ラス ーー 19, 98 column-width プロ パテ ィ =E 玉 21.25: 84 
@font-face - 21176 Columns-count プ ロ パテ ィ 183 
gKeifahies ー 171, 220 content プ ロ パ ティ _- 188.200. 251 
較 - ーー 19 Ccss 還 護 ーー _ 12 
- _ CSS2.1 13 
Android SDK 249 css3-mediaquerieS.jS | 35 
animation-delay プロ パテ ィ - 221 CSS3 PIE 5 証 ー 166, 210 
ER プロ パテ ィ 171. 220 cssSandpaper 四 80 


background-clip プロ パテ ィ 
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DD_belatedPNG 


75 





background-image プロ バテ ィ 


198 





display:flexbox 


26, 38, 133 
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display:grid 26 line-height プロパ ティ 204 
DropCaps 202 linear-gradient 126 
list-style プロ バテ ィ 24 


Eclipse IDE for Java Developers 249 


| 








filter プロ パテ ィ 109, 124, 215 
first-letter 擬似 要素 _ 。 頭 
Rex 人 。 39 
flexbox EE 26。 37。 133 
flex-order プ ロ パテ ィ ー _ | - 39 
人 3 42.43. 166 
font-family プロ パテ ィ 男 175 
font-size-adjust プ ロ パ ティ 20, 21 
6 

Gooqgle Web Fonts 76, 161, 176 
Google Web Fonts API 174 
gradient プロ パテ ィ 173 


| 


hover 擬 似 ク ラス 124 
HSLA 218 
HTML 12 


HTML5 Reset Stylesheet 103, 112 


HTML5.js (html5.js) 16, 117, 179, 185, 229 


html5reset-1.6.1.css 117.179. 185, 227 

















mask-image プロ バ パティ 77 
mask プロ パテ ィ 169 
Masonry 還 記 57 
media 属 作 ーー 31 
に - 50 








opacity プロ パテ ィ 101, 124, 182 
outline-offset プ ロ パテ ィ 還 語 235 
outline プロ パテ ィ 235 
BORISW3IHHSD 昌 K 76, 138 


PIE.htc 53, 66 
Ui absolute 92 
position: fixed 45, 52 
NE 本 92 
position プロ バテ ィ 92. 200 


Respond.js 16 
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selectivizrjs 


50, 71, 101, 227 























IE9.js - 16.124 text-align-last プ ロバ ティ 20, 22 
Sne ジン ミル ラー 多 ー 249 SHRBIIBSISSB2GIIGDI65 ーー 20. 23 
- SbBs5 プ パス 20. 23 
jQuery 57, 71. 81. 101. 135 82:OV8PHIOW ジ 日 2% デ 9 ーー 60 
で ー text-shadow プ ロ パ ティ ー 20, 23, 84, 106, 191, 214 
上 IIRB3DBSICIGN2Z 昌 NR 20, 22 
76, 142, 155. 


line-break プロ バテ ィ 20, 21 
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transform-origin プロ バテ ィ 
























































rotate 46, 75, 78, 154 擬似 クラ ス _- 18. 222 
OO scale 154 クラ デーション 126, 142, 173, 217, 239 
OB translate 154 グリ ッ ドレ イア ウト ー 26, 56 
transform プロ パテ ィ 2 ーー ーー ー 
tansItiOhsdelay ロバ ティ 47, 100, 140 子 セレ クタ ー - 5 人 Z 
TeiSIIOHzHhrati9h プロ パティ 47., 100.121. 139, 140 子 要素 証 ロ 14 
transition-property プロ パテ ィ 47, 100, 40 コン ディ ショ ナル コメ ント - 34 
trangltiontiming-function プ ロ パテ ィ 滞 計 100, 40 ーー ーー 机 


transition プロ パテ ィ 47, 94, 100, 113, 124, 132, 139, 156 


| 





Ultimate CSS Gradient Generator 26 


| 


W3C 13 
W3C の 勧告 13. 259 
Web フォ ント 21,. 76, 161., 174 
WebKit 15 
Word-break プ ロバ ティ 20, 22 
Word-wrap プロ パテ ィ 59 
writing-mode プロ パテ ィ 21.23 


| 


Xcode 249 





z-index プロ パテ ィ 92, 97, 154 








値 14, 17 
一 艇 兄弟 結 合 子 。。 ET 
親 要 素 Il 
カス タム URL スキー ム 144 
カラ ム 25, 84 





間接 セレ クタ 139 








子孫 セレ クタ に MA 
セレ クタ ーー 昌 間 - 14, 17 
属性 セレ クタ ー 17,. 148, 184 
た 

タイ プ セ レク タ 14 
透過 画像 ーー 62 
ドロ ッ プ シャ ドウ 23, 206 








フレ キシ プル ボッ クス レイ アウ ト 26 
プロ グレ ッ シ ブ ・ エ ン ハ ンス メン ト ( 16 
プロ パテ ィ 還 ー14, 20 
ベン ダー プレ フィ ックス 15..125 
ポリ フィ ル 5 生 _ 16 
0 
マー クア ッ プ 12 
マス キン グ - 究 
マル チカ ラム レイ アウ ト の 25 
メデ ィ ア クエ リ ー - 28, 30. 42, 170 





モジ ュー ル 13, 17 
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リキ ッ ド レイ アウ ト 48 
隣接 セレ クタ 15, 17, 139 
レス ポン シブ Web デザ イン 30. 56 





ロー ルオ ー パ ー 122 
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